Art Hub is a place for users from all over the world to share and view Art posts, like or dislike or comment opinions on a certain post.
It is designed to be a social space for artists or art lovers to get inspired or share inspirations with others.
Whether It's a painting a photograph or a sculpture Art Hub's goal is to make it easy to share with the rest of the world.
- Costume DRF API is created to handle all the crud functionality for this application.
- Main Navbar that contains a logo. and nav links depending on the status of the user (logged in/logged out
- Users can sign up to make a profile and sign.
- Users can create a post containing an image, title and a description of the post.
- Users can edit theire own existing posts
- Users can view everyone'sposts on the home page ordered by the latest uploads
- Users can like or dislike a post.
- Users can add a comment on a post, edit or delete own comments.
- Users can search for posts using keywords or user profile name.
- View all posts that a user have liked in Liked page
- A profile page for each user that contains all posts uploaded by the user
- A user can edit theire own profile Image, user name or password
- first sprint
- Second sprint
- Third sprint
- Fourth sprint
- Fifth sprint
Other user stories that were not included due to time limitations and could be implemented in the future:
Other potential features that could be included in the future:
- Ability to share other users posts
- Show most liked posts as the most popular in the application
- Require email for sign up.
The design is inspired by most social media websites and took reference from the Code institute Moment project
Used Figma to create a mockup of the main page
Fonts used google fonts:
- Koulen
Icons used font awsome
Logo and favicon designed using Hatchful
All Files went through the ESLint extension with no issues.
- Nav bar links: tested by clicking on each individual link and made sure that clicking on a link leads to the right URL and that routing is working where the page does not refresh
- Teste an invalid URL in the browser and made sure it leads to the page not found message
- Tested sign up form validation by submitting an empty fields to confirm form validation error message would appear
- Tested providing different values for password 1 and 2 fields to confirm that form validation message would appear
- Tested signing up for working by creating a new profile and made sure it redirects the user to the sign-in form URL
- Confirmed that my application is sending data to the deployed back-end DRF API after signing up a new account, and confirming the data was added to the API database in heroku
- Tested signing in with an existing account and confirmed it redirects user to home page URL when user submit
- Tested sign-in form validation by submitting empty field and confirm user would recive a form validation message
- Tested sign in form validation by trying to sign in with a none existing username or wrong password and confirm that users would recive a form validation message
- Tested that navbar reflect the user status if Loggedin/none logged in
- Tested if axios toeken interceptors refreshing tokens by signing in and remain idle for over 5 minutes and confirmed the user is not logged out.
- Tested that sign out link in the navbar loges out user and redirects to Home page URL
- Tested the useClickOutsideToggle hook by oppening the application in a small screen size. the navbar closes when clicking outside or when selecting a nav link.
- Tested Add a post by uloading an image and changing the image before saving.
- Tested that adding a post is sending data to the API when saving uploading image.
- Tested validation of add a post form by trying to submit without a title, or without uploading an image, or wrong type of files instead of an image
- Tested fetching a post by ID from the API and rendering in a post page.
- Tested if all posts appearing in home page ordered by most recent first.
- Tested that only logged in users can like a post, and a post owner can not like his/her own posts.
- Tested to like and unlike a post, and liked a post by diffrent users to confirm that the count like is increasing when liked and decreasing when a user unlikes
- Tested the liked posts page only show the posts that a user have liked.
- Tested the search bar returns results matching keyword or username that the user enters
- Tested infinite scroll keep fetching posts by uploading over 10 posts and scrolling.
- Tested drop down menu for posts only shows for the post owner.
- Tested the delete button in the drop-down menu for posts deletes a post from the database and redirects the user to the previous page
- Tested that user can edit a post by clicking on the edit a post in the drop down menu and checked if the edit form change the post after submitting.
- Testet that only a logged in user can add a comment into a post.
- Tested that submitting a comment adds a comment and saves it to the relevnt post page
- Tested that users can edit or delete their own comments and only the owner can do that.
- Tested that adding a comment increases the count next to the comment icon and deleting a comment decreases it
- Tested that infinite scroll works for comments by adding over 20 comments into a post and scrolling down to fetch more posts as i scroll.
- Tested that the profile page shows all posts posted by the profile owner.
- Tested that the Profile page shows the right profile, and that the stats show the right number of posts created by the profile owner
- Tested that editing a profile form works, by changing bio and uploading a profile image or changing an existing image
- Tested changing username form in the profile drop down menu and confirmed its working.
- Started an empty workspace and created a react app with the command: npx create-react-app . --use-npm
- Checked if the app is working as it should, and placed a placholder text.
- Added, commited and pushed to github.
- Created a new app in heroku.com
- Back in my worspace, i installed the heroku cli with the command: npm install -g heroku
- Entred the command heroku login -i and entred my username and password
- Then connected to my heroku application remotly by entering the command: heroku git:remote -a arthub-react (my app name on heroku)
- Pushed to heroku with the command: git push heroku main
- Updated the config vars in my DRF-API on heroku: the client origin dev and provided my react app workspace URL, and the client origin and provided it with the URL for my react application deployed at heroku.
- Installed axios and created axiosdefault.js/api and defined my default baseURL for my DRF-API and the content type.
- When the application was finished repeated steps (3 to 8)
- React Boostrap
- react-router-dom
- axios
- react-infinite-scroll-component
- The Code institute's react moment project was a huge point of reference on so many points while writing my application.
- My mentor Rohit Sharma provided much appreciated guidance
- Code instiute's Tutor Assistance for providing help through out the project
The entire project was a great experience with that said there is much yet for me to learn, and expand on this application considering due to the short available time I had to finish both the back and the front end in one week.