gsg-g10 / umar-reddit Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 1.0 216 KB

Weak08-Reddit Clone

Home Page: https://umar-reddit.herokuapp.com/

JavaScript 43.56% CSS 37.76% HTML 17.62% PLpgSQL 1.06%

nodejs expressjs html5 css3 postgresql axios hackmd reddit javascript json

umar-reddit's Introduction

Umar-Reddit

🏷️ Site URL

Umar-Reddit ©️

🅰️ User Story

User can see all posts on the home page.
User can sign up and login.
User don't need to be logged to view the posts,but need to be logged in to post and comment.
User can be able to create a comment on a Post
User can delete thier own posts.
User can click on a Create Post button and see a popup to create a new Post.
User can see his own profile.

🔤 Tech Used

> Git Work Flow
> npm 
> Jest
> HTML5
> CSS3
> Java Script (JS)
> NodeJS
> ExpressJS
> API
> Herouku
> PostgressSQL

📝 Work flow

Step 1: Create Repository

Create my Repository
Write main issues
Finish issue and create another .

🚀

Step 2: Create Server

first i install the dependencies and devDependencies i want to use in my project then i Created NodeJs Express server

I used axios in the dependencies insted of node-fetch because the API (reabid API) i deal with .

Step 3: Creat Database

When i study the main site that i want to clone it i found there is 3 tables i want to work with :

Table	PK
Users	userId
Posts	postId
Comments	commentId

📌 Want to design your schema like this ? ➜ DRAWSQL

Creat Database Schema
Connect the database with the Express Server
Creat the build.js file to build the database

🏨 Runnig the project locally

- git clone https://github.com/GSG-G10/Umar-Reddit.git
- cd Umar-Reddit
- npm i
- Call Me to have the .env file :p
- npm start

umar-reddit's People

Contributors

Forkers

umarsalah

umar-reddit's Issues

Create Server

Create an express server with nodeJs environment.

Main page posts

When anyone enters the site he will see a lot of posts for users who already have an account on it.

Sign-up Page

Create Sign-up page

Edit posts order in main page

Order the posts for the newest first.

Log In

When the user wants to log in he will enter the email and the password then checkup if it exists in the DB then redirect him to his profile.

Get Posts

On the main page, users should see random posts from random users.
On the profile page, user should see his own post.

Edit delete post

When deleting a post that has a comment we have to delete it comments then delete it.

Delete Post

User can delete their own posts.

Log Out

When the user clicks on the sign out button his cookies will be removed and redirected to the sign-in page.

Edit posts query

Edit the posts query where it was showing just the posts that have comments.

Create Post Page

Create Post Page to view the comments on every post.

Create Posts

The user can create a new post by click on add new post button.

Create Database

Create Database schema and connect it with the express server.

Hash Passwords

When the user signs up to the site we store the hashed password in the DB.

User Profile

When the user signed in or signed up he be redirected to his profile.

Sign Up

When the user inserts his data to create a new account, we will insert his data in that DB and create a new user then redirect him to the home page.

Error Pages

404.html
500.html
404.css
500.css
Handle in back end .

├── /server                      
 │   ├── index.js         
 │   ├── app.js  
 |   ├── /database 
 |      |ـــ connection.js 
 │      └── /Queries
 │            └──  index.js
 │      └── /config   
 │            |ـــ build.js
 │            └──  data.sql
 |    ├── /middlewares 
 │            └──  index.js
 |    ├── /router 
 │            └──  index.js
 |   |ــــ/utils
 |   ├── /controllers
          └── index.js           
├── /test
 │      └── index.test.js   
├── /public
 |  ├── index.html 
 |  |── /style  
 |       |ــ  404.css
 |       |ــ 500.css
 |       └── index.css                     
 |  ├── script  
│        └── index.js  
|
├── .gitignore 
├── .eslintrc.js                  
├── README.md                             
└── package.json

Handle errors

Handle backend errors in the frontend and promote them to the user.

Test Routes

Test "/" route with response 200 and HTML content type
Test "/errorPages" route with respmse 404 and HTML content type.