A social media website which helps users to share memorable events. Users can signup and/or login using their email id or google oath. Once signed in, they can create, edit, delete and like posts.
- Make a .env file in both client and server folder. Refer .env.example for the same.
- Run the following commands for both client and server:
- npm i
- npm start
- This project uses Express for the backend framework and, MongoDB as the database and Mongoose as the ODM. It has two collections, one for storing the posts and the other for storing the user credentials. Sensitive data like password is stored in a hashed form using 'bcrypt'.
- For authentication, JWT is used which creates(sign), decodes and verifies the token.
- The frontend uses React along with MUI for the components. The state is managed using React Redux which maintains a global store and the state variables are accessed using 'useSelector' hook. For updating a state variable, we use the 'dispatch' method which dispatches an action. An action has a type and a payload(the data to be updated). A reducer then updates the global store using the dispatched action.
- For authentication, Google OAuth2 is used via the package '@react-oauth/google'. In addition to this custom authentication is also implememnted using JWT.
- The frontend communicates with the backend using Axios.
- When not logged in
- Sign Up
- Sign In
- Creating a post
- Editing a post
- Database
-
Posts
-
Users
-
- Authentication
- Custom Login/Signin using JWT
- Google OAuth2
- Creating posts
- Editing and deleting posts
- Liking posts
- Posts can be only viewed if not logged in
- Once logged in, the session is active for 1 hour
- React
- MUI
- Express.js
- Node.js
- MongoDB
Revamping the UI and adding features such as comments, separate feed for others posts and tagging other users.