Using React, Node.js, Express & MongoDB to build a Full Stack MERN Application. The App is called "PetMate" and it is a pet owner community app that allows users to meet like friends and have some group activities with same interest friends offline.
Setup:
- First of all, in order to connect to the database, You need to login in on
https://www.mongodb.com/atlasto add your current IP address to inNetwork Access. ` - CONNECTION_URL is the link to the cloud database that you have set up on mongodb.
- Sender, PASS and HOST are needed for mail-message function in our application
- You can find already setup .env file with valid CONNECTION_URL, Sender, PASS and HOST in the server folder
- After setup of the above, run
npm install -forceandnpm startfor client folder, andnpm installandnpm startfor server folder to start the app
Here we will instruct our code in each folder.
The actions folder contains functions that send data (payload) to reducers to update the application state. These functions are typically triggered by events such as button clicks or form submissions.
The components folder contains our reusable React components, which can be imported and used in other parts of the application.
The api folder contains functions for making API calls to a server, typically using a library like Axios or Fetch.
The constants folder contains constants or configuration values that are used throughout the application, such as API endpoints or action types.
The images folder contains image files used in the application.
The reducers folder contains functions that handle state updates based on actions triggered by the user. The state updates are returned as a new state object, which is then stored in the application's global state.
This is the main component that renders other components and is responsible for routing and managing state.
This is the entry point of the React application and is responsible for rendering the App component and initializing the Redux store and other configuration settings.
The controller folder contains the logic for handling incoming HTTP requests, processing data, and returning responses.
The middleware folder contains functions that can be applied to incoming requests to modify them or add additional behavior before they are handled by the controller. Like the same action but from diff user.
The models folder contains the database schema definitions and data access functions for interacting with the database.
The routes folder contains the definitions for the routes that the application will handle, mapping HTTP methods and URLs to controller functions.
The index.js file ties everything together, importing the necessary modules and setting up the server to listen for incoming requests.
The following diagram depicts the architecture of this project and how the files collaborate with each other.
