*Full Stack Mongodb, ExpressJs, ReactJs and NodeJs online dating application *
Here is the github repository and here is a working demo on netlify
Open your terminal and create a dating-app-mern folder. Inside it, use create-react-app to create a new app called dating-app-frontend. The following are the commands to do this.
mkdir dating-app-mern
cd dating-app-mern
npm create-react-app dating-app-frontend
Return to the React project and cd to the dating-app-frontend directory. Start the React
app with npm start.
cd dating-app-frontend
npm start
Next, let’s delete some of the files that we don’t need. Navigate to dating-app-frontend > Src and delete the following files
- App.test.js , reportWebVitas.js , setupTests.js
Let’s remove all the unnecessary boilerplate code. The index.js file should look like
the following.
#index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
App.js contains only the text Dating App MERN. All the content from the App.css
file has been removed.
#App.js
import './App.css';
function App() {
return (
<div className="app">
<h1>Dating App MERN </h1>
</div>
);
}
export default App;
In index.css, update the CSS to have margin: 0 at the top.
*{
margin: 0;
}
Creating a Header Component
Let’s create a header component. First, you must install Material-UI (https://materialui.
com), which provides the icons. You need to do two npm installs, as per the Material-
UI documentation. Install the core through the integrated terminal in the dating-appfrontend
folder.
npm i @material-ui/core @material-ui/icons
Next, create a components folder inside the src folder. Create two files— Header.js
and Header.css—inside the components folder
The following is the Header.js file’s content.
#Header.js
import React from 'react'
import './Header.css'
import PersonIcon from '@material-ui/icons/Person'
import IconButton from '@material-ui/core/IconButton'
import ForumIcon from '@material-ui/icons/Forum'
const Header = () => {
return (
<div className="header">
<IconButton>
<PersonIcon fontSize="large"
className="header__icon" />
</IconButton>
<img className="header__logo"
src="logo192.png"
alt="header" />
<IconButton>
<ForumIcon fontSize="large"
className="header__icon" />
</IconButton>
</div>
)
}
export default Header
Include the Header component in the App.js file and on localhost. The updated
code is marked in bold.
#App.js
import './App.css';
import Header from './components/Header';
function App() {
return (
<div className="app">
<Header />
</div>
);
}
export default App;
The Header.css file contains the following content, including simple styles, which
completes the header.
#Header.css
.header{
display: flex;
align-items: center;
justify-content: space-between;
z-index: 100;
border-bottom: 1px solid #f9f9f9;
}
.header__logo{
object-fit: contain;
height: 40px;
}
.header__icon{
padding: 20px;
}
Let’s now work on the second component. Create two files— DatingCards.js and
DatingCards.css—inside the components folder.
The updated code of App.js is below
#App.js
import './App.css';
import Header from './components/Header';
import DatingCards from './components/DatingCards';
function App() {
return (
<div className="app">
<Header />
< DatingCards />
</div>
);
}
export default App;
Before moving forward let's install this
package has a feature that provides the swipe effect.
npm i react-tinder-card
Next, put the content in DatingCards.js
#DatingCards.js
import React, { useState } from 'react'
import DatingCard from 'react-tinder-card'
import './DatingCards.css'
const DatingCards = () => {
const [people, setPeople] = useState([
{ name: "Random Girl", imgUrl: "https://images.unsplash.com/photo-1599842057874-37393e9342df?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fGdpcmx8ZW58MHx8MHx8&auto=format&fit=crop&w=634&q=80" },
{ name: "Another Girl", imgUrl: "https://images.unsplash.com/photo-1602693130555-a1a37fda607b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fGJsYWNrJTIwZ2lybHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=634&q=80" },
{ name: "Random Guy", imgUrl: "https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=634&q=80" },
{ name: "Another Guy", imgUrl: "https://images.unsplash.com/photo-1601576084861-5de423553c0f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8MzF8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=634&q=80" }
])
const swiped = (direction, nameToDelete) => {
console.log("receiving " + nameToDelete)
}
const outOfFrame = (name) => {
console.log(name + " left the screen!!")
}
return (
<div className="datingCards">
<div className="datingCards__container">
{people.map((person) => (
<DatingCard
className="swipe"
key={person.name}
preventSwipe={['up', 'down']}
onSwipe={(dir) => swiped(dir, person.name)}
onCardLeftScreen={() => outOfFrame(person.name)} >
<div style={{ backgroundImage: `url(${person.
imgUrl})`}} className="card">
<h3>{person.name}</h3>
</div>
</DatingCard>
))}
</div>
</div>
)
}
export default DatingCards
Add the first styles in the DatingCards.css file.
#DatingCards.css
.datingCards__container{
display: flex;
justify-content: center;
margin-top: 10vh;
}
.card{
position: relative;
background-color: white;
width: 600px;
padding: 20px;
max-width: 85vw;
height: 70vh;
box-shadow: 0px 18px 53px 0px rgba(0, 0, 0, 0.3);
border-radius: 20px;
background-size: cover;
background-position: center;
}
.swipe{
position: absolute;
}
.cardContent{
width: 100%;
height: 100%;
}
.card h3{
position: absolute;
bottom: 0;
margin: 10px;
color: white;
}
Creating the Swipe Buttons Component
Create two files— SwipeButtons.js and SwipeButtons.css—inside the components
folder.
#App.js
import './App.css';
import Header from './components/Header';
import DatingCards from './components/DatingCards';
import SwipeButtons from './components/SwipeButtons';
function App() {
return (
<div className="app">
<Header />
< DatingCards />
< SwipeButtons />
</div>
);
}
export default App;
The content of the SwipeButtons.js
#SwipeButtons.js
import React from 'react'
import './SwipeButtons.css'
import ReplayIcon from '@material-ui/icons/Replay'
import CloseIcon from '@material-ui/icons/Close'
import StarRateIcon from '@material-ui/icons/StarRate'
import FavoriteIcon from '@material-ui/icons/Favorite'
import FlashOnIcon from '@material-ui/icons/FlashOn'
import IconButton from '@material-ui/core/IconButton'
const SwipeButtons = () => {
return (
<div className="swipeButtons">
<IconButton className="swipeButtons__repeat">
<ReplayIcon fontSize="large" />
</IconButton>
<IconButton className="swipeButtons__left">
<CloseIcon fontSize="large" />
</IconButton>
<IconButton className="swipeButtons__star">
<StarRateIcon fontSize="large" />
</IconButton>
<IconButton className="swipeButtons__right">
<FavoriteIcon fontSize="large" />
</IconButton>
<IconButton className="swipeButtons__lightning">
<FlashOnIcon fontSize="large" />
</IconButton>
</div>
)
}
export default SwipeButtons
Next, style the buttons in the SwipeButtons.css file.
#SwipeButtons.css
.swipeButtons{
position: fixed;
bottom: 10vh;
display: flex;
width: 100%;
justify-content: space-evenly;
}
.swipeButtons .MuiIconButton-root{
background-color: white;
box-shadow: 0px 10px 53px 0px rgba(0, 0, 0, 0.3) !important;
}
.swipeButtons__repeat{
padding: 3vw !important;
color: #f5b748 !important;
}
.swipeButtons__left{
padding: 3vw !important;
color: #ec5e6f !important;
}
.swipeButtons__star{
padding: 3vw !important;
color: #62b4f9 !important;
}
.swipeButtons__right{
padding: 3vw !important;
color: #76e2b3 !important;
}
.swipeButtons__lightning{
padding: 3vw !important;
color: #915dd1 !important;
}
Top comments (7)
More and more people believe in online dating and the chance to meet a soul mate on a dating site. There is nothing strange in this. All over the world, people are facing the same problem - they do not have enough time even for personal happiness. And recently I came across an article that helped me newswatchtv.com/2019/06/27/discover-ladadate-resource- joining-love-seeking-people-together/ it describes a new service in order to find a mate on the Internet and evaluate an active audience there
I want to understand one truth that everyone seems to know except me. Where to look for hot women? Such frank, seductive, who are looking for sexual adventures and a man only for one night? Recently I learned that it is not really difficult to find a hot woman if you know what to look for in communication and in the behavior of women. A popular place to find hot women are pubs and nightclubs. I will not write long, here is an article on this topic Where to find horny women and I promise that after reading it you will know everything about what a hot woman looks like, where to look for her, and what to do to attract her attention.
It reminded me that the site that I used and still use for like 5 months is one site for discreet hook ups. And since I have been using it for a long time, I can say that this platform is really worthy of your attention. And if you are tired of being lonely or just want to have some fun, you can use this wonderful site.
I’ve always been interested in dating people from different cultures, but I wasn’t sure where to start. That’s when I came across flirtini.com/asian.html, and it was exactly what I was looking for. It made it so much easier to connect with people who share the same interest. Within a few days, I was chatting with someone who was not only interesting but also really fun to talk to. Now, instead of wasting time on random matches, I actually meet people who get what I’m looking for. Definitely a game-changer!
Can't resist suggesting features for a dating app. Namely, adding tips for users of both male and female articles. For example, when people start getting to know each other, a window should appear with a reminder such as: tell something about yourself, be polite or give a compliment. There are many ways to conquer each other's hearts and this article taught me this about online dating No application has done this before, I really hope that someone will be interested in this an idea.
And what are ready-made dating sites that you can advise me?
Hello, everyone! I'm thinking of signing up for a dating site, but I'm afraid of wasting my time. Does anyone have a positive experience?
Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more