🌐 XMeme
XMeme is a platform where people can post the memes and see the memes posted by other users, It isfullstack implementation in MongoDB, ExpressJS, ReactJS, NodeJS(MERN).
The project is the part of Crio Winter's of doing stage 2B.
Site is live here .
Swagger is here .
$ git clone https://gitlab.crio.do/COHORT_ME_BUILDOUT_XMEME_ENROLL_1612436694845/narendramanglani04-me_buildout_xmeme.git
LICENSE
readme.md
install.sh
server_run.sh
backend/
controllers/
models/
routes/
app.js
db.js
.gitignore
package.json
swagger.json
.env (to create .env, check [prepare your secret session])
frontend/
public/
src/
.gitignore
package.json
README.md
...
or You can just execute following in terminal to install MongoDB, Node, npm locally for ubuntu, It will also enable mongoDB database locally:
$ cd narendramanglani04-me_buildout_xmeme // navigate to the clone directory.
$ chmod +x install.sh // make install.sh as an executable file.
$ ./install.sh // execute the install.sh file
...
NOTICE : You need frontend and backend to run concurrently in different terminal session, in order to make them talk to each other
So make two terminals now, Terminal - 1 for backend and Terminal - 2 for frontend.
$ cd backend // navigate to the backend folder from the cloned directory.
In order to connect your backend with the local mongoDB server you've to make .env file and define and initialise the variable DB_CONN as the string which will connect the backend with the mongoDB locally.
Run the following in the terminal now,
$ echo "DB_CONN='<URI for the local mongoDB server>'" >> .env
Example:
$ echo "DB_CONN='mongodb://localhost:27017'" >> .env
$ npm i // npm install pacakges
$ npm start // start the backend server.
$ cd frontend // go to frontend folder from the cloned directory
In order to connect your frontend with the backend you've to define the source of the backend in the .env as we mentioned the mongoDB address in the backend to connect mongoDB with the backend, So to connect the frontend to the backend, we need to initialise variable REACT_APP_BACKEND_URL as the 'http://localhost:8081'.
This application has the feature of deleting the post as well, So if you want to delete any post from the frontend you have to enter the password for the same, so you also need to initialise variable REACT_APP_PAS as your password.
$ echo "REACT_APP_BACKEND_URL='http://localhost:8081'" >> .env
$ echo "REACT_APP_PAS='<your password>'" >> .env
$ npm i // npm install pacakges
$ npm start // run the frontend locally
| Client-side | Server-side |
|---|---|
| @material-ui/core: ^4.11.3 | cors: ^2.8.5 |
| @material-ui/icons: ^4.11.2 | dotenv: ^8.2.0 |
| @material-ui/lab: ^4.0.0-alpha.57 | express: ^4.17.1 |
| @testing-library/jest-dom: ^5.11.9 | mongoose": ^5.11.15 |
| @testing-library/react: ^11.2.5 | nodemon: ^2.0.7 |
| @testing-library/user-event: ^12.6.3 | swagger-ui-express: ^4.1.6 |
| axios: ^0.21.1 | uuid": "^8.3.2 |
| dotenv: ^8.2.0 | |
| formik: ^2.2.6 | |
| react: ^17.0.1 | |
| react-dom: ^17.0.1 | |
| react-scripts: 4.0.2 | |
| web-vitals: ^1.1.0 | |
| yup: ^0.32.8 |
User visiting the Home Page
User can Post the Meme by filling the form
Meme is now posted below
User can edit the Meme by clicking edit and change the url, caption or both.
Admin can delete any meme by entering the password.
