CHRISGRAM

A Full stack Web Application
Built in React+Redux, MongoDB, Express, Node (MERN)
UI in MaterialUI
~~Deployed with Docker -> CapRover -> DigitalOcean~~
- Removed deployment, code refactoring to serverless.

- View serverless v2 [here](https://github.com/chrismlee26/chris-gram-next)

Description

chrisgram v0.3.1 is image upload web application and social media platform allowing users to upload, share and like photos.
Now containerized with Docker Compose
~~Deployed to CapRover (PaaS) and Digital Ocean (VM)~~
~~Front-End is hosted on https://chrisgram-client.dev.chrislee.wtf // http://localhost:3000~~
~~Back-End is hosted on https://chrisgram-server.dev.chrislee.wtf // http://localhost:5000~~
~~MongoDB server is running on http://localhost:27017 // port 27017~~

Build Container

To build back-end (node) container, type:

docker build -t chrisgram-server

To build front-end (React) container, type:

docker build -t chrisgram-client

To build the entire application, type:

docker-compose build

Run Container

To run the multi-container system, type:

docker-compose up

To run the back-end (node), type:

docker run -p 5000:5000 chrisgram-client

To run the front-end (React), type:

docker run -p 3000:3000 chrisgram-client

Install Dependencies

npm i

Installed Packages and Dependencies

React + Redux + Thunk
axios
momentjs
dotenv
Express + Mongoose + Nodemon
react-file-base64 (file upload)

Planned Updates

✅ Containerize with Docker ✅ Deployment with CapRover 3. Remove props drilling with Redux {store} 4. Add CSS styling 5. Authentication with JWT 6. User Accounts & Sign-In 7. Multiple Pages 8. Comments for photos

Run Application

Back-End is in folder Server. To run the node/express server, navigate to /server/ and type:

npm start

Front-End is in folder Client. To run the React web application, navigate to /client/ and type:

npm start