Since dating apps become one of the mainstream tools for connecting human being, but these apps still don't give any chance to our pets to make new friends.
Pets are always used as human accessories or even as a method for dating. Therefore I created the app to serve the pets, all the user information is about the pets, not about his/her/its owner.
-
Clone this repo
-
Open the file and start:
cd dating-apesFirst install all npm package in root folder (backend) and run it:
npm install npm run dev
Second install all npm package in client folder (frontend) and run it:
cd client npm install npm start -
Create
.envfile with the following variables:MONGODB_URI TOKEN_SECRET CLOUDINARY_NAME CLOUDINARY_API_KEY CLOUDINARY_API_SECRET
dating-apes
┣ client
┃ ┣ build
┃ ┣ node_modules
┃ ┣ public
┃ ┣ .gitignore
┃ ┣ package.json
┃ ┗ src
┃ ┣ App.js
┃ ┣ App.css
┃ ┣ index.js
┃ ┣ index.css
┃ ┣ utils
┃ ┃ ┣ ConvertZodiac.js
┃ ┃ ┗ MatchPercentage.js
┃ ┣ components
┃ ┃ ┣ Navbar.js
┃ ┃ ┣ IsAnon.js
┃ ┃ ┣ IsPrivate.js
┃ ┃ ┣ UserCard.js
┃ ┃ ┣ MessageCard.js
┃ ┃ ┗ AddAText.js
┃ ┣ context
┃ ┃ ┗ auth.context.js
┃ ┗ pages
┃ ┣ HomePage.js
┃ ┣ SignupPage.js
┃ ┣ LoginPage.js
┃ ┣ UserListPage.js
┃ ┗ UserDetailsPage.js
┃
┣ server.js
┣ app.js
┣ .env
┣ models
┃ ┣ User.model.js
┃ ┗ Message.model.js
┣ routes
┃ ┣ index.routes.js
┃ ┣ auth.routes.js
┃ ┣ user.routes.js
┃ ┗ message.routes.js
┣ db
┃ ┗ index.js
┣ middleware
┃ ┗ jwt.middleware.js
┣ error-handling
┃ ┗ index.js
┣ config
┃ ┗ index.js
┣ node_modules
┣ .gitignore
┣ package.json
┗ README.md
client-side
clientfolder contains the client-side code for the application.buildfolder contains the compiled and minified production build of the client-side code.publicfolder contains the static assets that are not processed by webpack.srcfolder contains the source code for the client-side application.App.jsis the root component of the React application.App.csscontains styles specific to the App component.index.jsis the entry point for the React application and renders the App component.utilsfolder contains utility pieces that are used by the client-side code.componentsfolder contains smaller components that make up the UI of the application.contextfolder contains the auth.context.js file, which is the context provider for authentication.pagesfolder contains components that represent routes for the application.
server-side
server.jsis the entry point for the server and exports the Express app.app.jssets up an Express application that imports environment variables, connects to a database, adds middleware, defines routes, serves static files, and sets up error handling..envcontains environment variables for the application.modelsfolder contains the Mongoose models for the application.routesfolder contains the route handlers for the server.db/index.jsconnects to a MongoDB database using Mongoose.middleware/jwt.middleware.jsexports the middleware for verifying JWT tokens.error-handling/index.jsexports the error-handling middleware for the server.config/index.jsexports a middleware function that sets up a Express application with common middleware such as CORS, logging, cookie parsing, and JSON body parsing.
- Promise based HTTP client - axios@0.27.2
- Optimized bcrypt in plain JavaScript with zero dependencies - bcryptjs@2.4.3
- Cloudinary NPM for node.js integration - cloudinary@1.30.1
- Effortlessly optimize and transform your cloud's assets - cloudinary-react@1.8.1
- Environment configuration - dotenv@16.0.1
- Web framework for Node.js - express@4.18.1
- JWT authentication middleware - express-jwt@7.7.5
- JSON Web Tokens (jwt) - jsonwebtoken@8.5.1
- Mongoose MongoDB ODM - mongoose@6.4.5
- JavaScript library for building user interfaces - react@18.2.0
- Declarative routing for React web applications - react-router-dom@6.3.0
- Run multiple commands concurrently - concurrently@7.6.0
- Frontend: React
- Backend: Express and Node.js
- Database: MongoDB
- Deployed on Render
Now you have it 🎉 🦍
Thank you for reading and happy coding 💚