Skip to content

A simple social media app that allows users to post interesting events that happened in their lives, and Authentication

Notifications You must be signed in to change notification settings

tinspham209/memories-application

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

72 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Project: Memories Application

Date:

  • Phrase 1 + 2: 02 - Nov - 2020 ~> 08 - Nov - 2020
  • Phrase 3 (Authentication): 26 - Mar - 2021

Description

  • A simple social media app that allows users to post interesting events that happened in their lives.
  • Build and Deploy a Full Stack MERN App
    • React
    • Redux
    • Node
    • Express
    • MongoDB
  • Authentication:
    • Login with Email (JWT)
    • Login with Google
    • Token Expiry
  • Role for Users
    • User can views the posts, but can't like or any actions
    • Login for create new post
    • Only delete/edit information of posts that user's was create
  • Responsive is support for all screen

Screenshot

  • memories-application

Release

Live Site:

Live Server:

Tech-Stack

Plan Of Action

Phrase 1:

  • Initial Project
  • Draw Architecture Structure
  • Backend Setup
  • Frontend Setup
  • server: index.js Setup
  • MongoDB Setup
  • Connecting to the Database in cloud.mongodb
  • Routing
  • Backend Folder Structure
  • Controllers
  • JSX Structure
  • Styling
  • setup Redux
  • Form structure JSX
  • Create a Post and send to server
  • fetch Posts from server and load to UI
  • Update Post in server
  • Update Post in client
  • Delete Post in server
  • Delete Post in client
  • Like Post in server
  • Like Post in client
  • Fix UI
  • Mobile Responsive
  • Environmental Variables
  • Deploy /server to heroku
  • Deploy /client to firebase
  • Add custom domain to /client
  • Write README.md Document
  • Screenshot of UI

Phrase 2:

  • Refactor Layout with router
  • Auth Form UI
  • Google OAuth
  • JWT Login
  • JWT Auth Backend
  • Auth Middleware
  • JWT Login Frontend
  • User Actions
  • Like, delete & edit
  • Token Expiry
  • Deployment

After this project

I have improve my knowledge about

  • how to use redux in project
  • CRUD in server (CREATE, READ, UPDATE, DELETE)
  • separate each models, controllers, routes,
  • Deploy client to firebase
  • Styles CSS with Material-UI

I have understand about

  • how to apply redux thunk to project
  • structure with Material-UI
  • how to style component with makeStyles
  • working with mongoDB
  • send database to cloud (cloud.mongodb.com)
  • how to send setState of useState to children
  • how to count a like of Post in server
  • Deploy server to heroku
  • Google OAuth
  • what is Middleware and how to apply it in to project
  • what is JWT and how to use
  • JWT Auth Backend & Frontend
  • Role for User Actions
  • Token Expiry

Bug:

  • CAN'T login with Google when deploy, but in localhost it can
  • when update new hashtags of post, but data is updated:
error.message TypeError: Cannot destructure property 'data' of '(intermediate value)' as it is undefined.
  at posts.js:24
  • CAN'T import img that has large size
  • Fetch data from heroku is 5s delay.
  • when create new post, file attached is not clear

Next Steps:

  • Create Architecture document
  • Set limit of post per page, click next page to load more...

Directory Structure

.
├── client
└── server

Installation Guide

Production

  • Clone this project
git clone https://github.com/tinspham209/memories-application

Server:

  • cd to /server

  • Install dependencies

npm install
  • create .env file similar with my .env.example file

  • update CONNECTION_URL with your url MongoDB Atlas

  • Start the server, project with run on PORT 5000

npm start

Client:

  • cd to /client

  • Install dependencies

npm install
  • Start the server, project with run on PORT 3000
npm start

How to deploy project

  • go to both /client & /server, and read the README.md to understand

How to upgrade project?

  • go to both /client & /server, and read the README.md to understand
  • If have any question? Open issues or Email me: [email protected]

About

A simple social media app that allows users to post interesting events that happened in their lives, and Authentication

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published