zayan-alaraishy / blog-app

Full stack web blog.

💻 Wall4All

Blogging website that allows you to share your thoughts with others in posts and check others' posts.

🚀 Live Link

Click to check our great project!

👤 User journey

• When the user opens the website from his browser for the first time, he will get a login page so he had to enter his email connected to this app and his password.
• If he doesn't have an account, the user can navigate to the sign-up page and create his account simply!
• After signing successfully, the journey starts.
• The user will get a page of posts added to this website by different users with a navigation bar at the header.
• He/She can see a button to add a new post where he can click and add the details of his post. Once clicking on the Post button, the post will be added after being validated.
• Next to the add post button on the header, the user can see a profile icon. When hovering over it, a drop-down menu appears; it has two options: My profile and logout.
• When the user clicks on the My profile option, he/she will be navigated to his profile page where he can check his all posts and delete any of them by clicking on the Delete post button.
• When the user clicks on the logout option, the user will be logged out from the website and he will get the login page.

👤 User story

• As a user, I want to create my account easily.
• As a user, I want to be able to check others' posts.
• As a user, I want to be able to add posts with titles, content, and image.
• As a user, I want to get all my posts on one page.
• As a user, I want to be able to delete any of my posts.
• As a user, I don't want to log in each time I open the website.
• 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. We are going to make it easy for you, here is the link https://github.com/CA-G12/Blog-app-Team8.git. In your terminal type the following commands.
3. git clone [link].
4. cd Blog-app-Team8
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! ✨

🐱‍💻 Team members

• Mohammed Balousha
• Mostafa Balousha
• Mai Abu Abed
• Zayan Alaraishy