- ➕ Add Meme
- ✏️ Edit Meme
- 👍 Like/Dislike Meme
- 💬 Comment on a Meme
- 🗑️ Delete Meme
-
Frontend: ReactJs
- Material UI
- Context for State Management
-
Backend: NodeJS
- ExpressJs
- Swagger JSDoc for API documentation
-
Database: MongoDB
-
Deployment: Heroku (Separate Frontend and Backend)
- Clone the repository using
git clone <url> - Cd into the repo using
cd <dir> - Cd into frontend and backend directory and run
npm installin both the directories to install the dependencies - You need MongoDB. You can follow the instructions from their official website
git clone <url>
cd <dir>
# Go into frontend directory and install dependencies
cd frontend
npm install
# Port 3000 (http://localhost:3000)
npm start
# Go into backend directory and install dependencies
cd backend
npm install
# Port 8081 (http://localhost:8081)
node index.js
- Alternatively for backend, you can run install.sh which will install all the backend dependencies and then execute the server_run.sh which will spin up the backend server.
- Go into backend directory and run
docker-compose up. You can then go tohttp://localhost:8081/Make sure you have docker and docker-compose installed.
.
├── helpers # Helper function directory
│ ├── checkError.js # Function to check error message and return code
│ └── checkId.js # Function to check if ID is valid or not
├── index.js # Spinning up a server and database
├── models # Directory containing database schema
│ └── memes.js # Meme Schema for MongoDB
├── package.json
├── package-lock.json
└── routes # Routes directory holding different routes
├── comments.js # All the routes that are related to comments resource
├── likeDislike.js # All the routes that are related to like/dislike resource
└── memes.js # All the routes that are related to memes resource
.
└── src
├── App.js
├── App.test.js
├── components # Main Components Directory
│ ├── controls # Controls directory
│ │ ├── Popup.js # Popup Control for all forms
│ │ └── toast.js # Toast Control for notification
│ ├── forms # Forms Directory
│ │ ├── CommentForm.js # Comment Form Component
│ │ ├── EditForm.js # Edit Form Component
│ │ ├── LikeDislike.js # Like /Dislike Form Component
│ │ └── MemeForm.js # Meme Add Form Component
│ └── home # Home page Directory
│ ├── Appbar.js # App Bar component
│ ├── MemeList.js # List of Memes Component
│ └── MemePost.js # Meme Post Card Component
├── context # Context Directory
│ └── MemeContext.js # Context Provider for Memes
├── index.css
├── index.js
├── reportWebVitals.js
└── setupTests.js