My Mission

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.

Setup

• Clone this repo

• Open the file and start:

  cd dating-apes

  First 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 .env file with the following variables:

  MONGODB_URI
  TOKEN_SECRET
  CLOUDINARY_NAME
  CLOUDINARY_API_KEY
  CLOUDINARY_API_SECRET
  

File Structure

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

• client folder contains the client-side code for the application.
  • build folder contains the compiled and minified production build of the client-side code.
  • public folder contains the static assets that are not processed by webpack.
  • src folder contains the source code for the client-side application.
    • App.js is the root component of the React application.
    • App.css contains styles specific to the App component.
    • index.js is the entry point for the React application and renders the App component.
    • utils folder contains utility pieces that are used by the client-side code.
    • components folder contains smaller components that make up the UI of the application.
    • context folder contains the auth.context.js file, which is the context provider for authentication.
    • pages folder contains components that represent routes for the application.

server-side

• server.js is the entry point for the server and exports the Express app.
• app.js sets up an Express application that imports environment variables, connects to a database, adds middleware, defines routes, serves static files, and sets up error handling.
• .env contains environment variables for the application.
• models folder contains the Mongoose models for the application.
• routes folder contains the route handlers for the server.
• db/index.js connects to a MongoDB database using Mongoose.
• middleware/jwt.middleware.js exports the middleware for verifying JWT tokens.
• error-handling/index.js exports the error-handling middleware for the server.
• config/index.js exports a middleware function that sets up a Express application with common middleware such as CORS, logging, cookie parsing, and JSON body parsing.

NPM Packages

• 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

Stack

• Frontend: React
• Backend: Express and Node.js
• Database: MongoDB
• Deployed on Render

Now you have it   🎉   🦍
Thank you for reading and happy coding  💚