🤖 Zayan-Reddit

Reddit clone web app.

🚀 Live Link

Read the user journey below to know all features to check. Click to check my project

👤 User journey

• When the user opens the website from his browser for the first time, he will get the main page of the website which contains all the posts and two buttons for signing in or up at the header.

• If you haven't registered before, click the Sign up button, then you will get the sign-up page. Fill out the form and hit Sign up and the end of it.

• If you already have an account, click the Sign in button, then you will get the sign-in page. Fill out the form and hit Sign in and the end of it.

• After signing successfully, the journey starts. The user will get the main page again.

• Take a look at the header(nav-bar): - Reddit logo: once clicking, you will get the main page always. - Search bar: isn't working till now. - Create post: once clicking, you will get the create post page where you can add your post. - Username: once hovering or clicking, a drop-down menu with two options will appear: View profile and logout

• In the body of the main page, an input field appears at the top, when you click you will be taken to the create post page.

• Under the create post input field, you can see all the posts.

• Each post has a Comments button at the bottom of it. Click to get the Post page and all comments on it. You can add your comment too, by typing it on the input field on the Post page and clicking the + Add my comment button and it will appear at the top!

• In the Create post page: you will have two buttons at the top: Text content and Image. At least you should add text content, the image is optional. Add your text in the text content on the input field. If you want to add an image, click the Image(optional) tab and enter the URL in the input that appears. You can view the image added once by clicking the Preview image button. I have image URL validation so don't try to add a random URL hhhh! Finally, hit Add post when you are done!

• Any user you can see through the main page in the posts, comments, and Post page, click on his avatar to view his profile. On the profile page, you check how many posts he/she has and all his/her posts.

👤 User story

• As a user, I want to be able to see others' posts and comments on them from the newest to the oldest, even without signing.
• As a user, I want to create my account easily.
• As a user, I want to be able to navigate between pages easily.
• As a user, I want to be able to add posts with text content, and an image.
• As a user, I want to be able to add comments on any post.
• As a user, I want to have a profile page where I can get all my posts.
• As a user, I want to check others' profiles.
• As a user, I don't want to log in each time I open the website from the same browser.
• As a user, I want my account to be secure.

💻 Technologies used

• HTML5.
• CSS3.
• JS.
• DOM Manipulation.
• Node js.
• Express.
• Postgresql.
• NPM.

📋 ERD

💡 Installation guide

1. You can click the code drop-down menu above and copy the link to clone the repo or check the coming step!
2. I am going to make it easy for you, here is the link https://github.com/CA-G12/Zayan-Reddit.git. In your terminal type the following commands.
3. git clone [link].
4. cd Zayan-Reddit
5. npm i to install the used npm packages.
6. npm start to start your server on the production environment.
7. npm run test to start the tests.
8. npm run dev to start your server on the development environment.
9. Don't forget to create a .env file to add your database URLs.
10. Happy coding! ✨

🐱‍💻 Done by

• Zayan Alaraishy