https://github.com/jgudo/foodie
A social media for food lovers and for people looking for new ideas for their next menu.
https://github.com/jgudo/foodie
mern mern-social-media-app mern-stack react-social-media social-media
Last synced: about 2 months ago
JSON representation
A social media for food lovers and for people looking for new ideas for their next menu.
- Host: GitHub
- URL: https://github.com/jgudo/foodie
- Owner: jgudo
- License: mit
- Created: 2020-12-20T02:57:20.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-05-14T13:45:04.000Z (about 2 years ago)
- Last Synced: 2025-03-25T23:02:15.407Z (2 months ago)
- Topics: mern, mern-social-media-app, mern-stack, react-social-media, social-media
- Language: TypeScript
- Homepage: https://foodie.jgudo.vercel.app
- Size: 4.51 MB
- Stars: 77
- Watchers: 1
- Forks: 29
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Foodie
A social media for food lovers and for people looking for new ideas for their next menu. A facebook/instagram-like inspired social media.
 
## Table of contents
* [Features](#features)
* [Technologies](#technologies)
* [Installation](#installation)
* [Run Locally](#run_local)
* [Deployment](#deployment)
* [Screenshots](#screenshots)
## Features
This web app consists of a basic features/functionalities of a socia media
* Login and Registration
* Notification
* Private Messaging
* Post CRUD functionality
* Comment feature
* Profile Customization
* Followers/Following feature
* Search Feature
## Technologies
| Front End | Back End |
| ----------- | ------------|
| React 17.0.1| Node 12.18.1|
| TypeScript | MongoDB |
| Redux | Mongoose |
| Redux-Saga | SocketIO |
| React Router| Express JS |
| TailwindCSS | Passport JS |
| PostCSS | Google Cloud Storage|
| Axios | |
## Installation
To install both ends (frontend/server).
```
$ npm run init-project
```
Or to install them individually
```
$ cd frontend // or cd server
$ npm install
```
## Run locally
Before running the project, make sure to have the following done:
* Download and install [MongoDB](https://www.mongodb.com/)
* Create [Firebase Project](https://console.firebase.google.com/u/0/) for storage bucket
* Create Google Service Account json key and configure ENV variable to your machine
Create ```.env-dev``` or ```.end-prod``` env variables and set the following:
```
MONGODB_URI=
DB_NAME=
PORT=
CLIENT_URL=
SESSION_SECRET=
SESSION_NAME=
FIREBASE_PROJECT_ID=
FIREBASE_STORAGE_BUCKET_URL=
GOOGLE_APPLICATION_CREDENTIALS=
FACEBOOK_CLIENT_ID=
FACEBOOK_CLIENT_SECRET=
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
```
You can get your Facebook client id/secret here [Facebook for developers](http://developers.facebook.com/) and for GitHub here [Register Github OAuth App](https://github.com/settings/applications/new) and set the necessary env vars above.
After doing the steps above, you have to run your ```Mongo Server``` and finally you can now run both ends simultaneously by running:
```
$ npm start
```
Or you can run them individually
```
$ npm run start-client // frontend
$ npm run start-server // backend
// Or you can change to individual directory then run
$ cd frontend // or cd server
$ npm start
```
## Deployment
You can deploy your react app in [Vercel](http://vercel.app/) or whatever your preferred deployment platform.
And for the backend, you can deploy your server in [Heroku](https://heroku.com)
## Screenshots
