Access live link: https://skin-language.netlify.app/
A MERN stack project for Trent Global College. Backend github link - https://github.com/illydali/Project-Two-Express
Allow users to have access to a crowd-sourced website where they can easily filter and update information about homemade masks they may have come across or created.
- As a website owner, I want to have a dynamic space for users of my website to check out and add new recipes that they may have tried.
- As a website owner, I want users to be able to add their comments for each recipe.
- As a user of the website, I want to be able to easily find beauty recipes for homemade facial masks so that I can save time.
- As a user of the website, I want to have somewhere to share my own homemade recipes so that I can keep track of them.
- As a user, I want to be able to add in my comments for recipes I have tried so that I can share my feedback.
- Home page for handling search
- Navigation bar to move between 3 main pages
- Browse page to allow user to sift through all articles
- Search Bar to find an article
- Search filters for finding by skin type, body parts or duration
- User contributions
- Submitting an article
- Editing selected portions of article
- Allowing delete of an article
- Adding in comments
- Editing of comments
- Deleting of comments
- Mobile responsiveness
- An overall pleasing user experience
As this is a single page application, user can navigate through three main buttons in the Navbar
- Home Page contains search box and filters to search for data. Clcking on Learn More when search results populates brings user to the full article.
- From Browse button, user can view all articles available. Clcking on Learn More in each Article card brings user to full acticle.
- From article page, user is able to edit or delete article.
- Also from article page, user is able to add/edit or delete comments.
- Create button brings user to form page where a user can submit an article.
Colors selected to relate to skin and gies off a calming effect when using the website.
Font selected is Roboto
| Category | Actions | Outputs |
|---|---|---|
| Overall | On Load | Carousel auto plays |
| Browse Link | On Click | Renders all available articles in card form |
| Search Bar | Typing on field | Text is read |
| Filter | Filter Duration | Drop down changes to selected duration |
| Filter | Filter Body Tags | Drop down changes to selected tag |
| Selecting Checkbox | On Select | Highlights box |
| Search Button | On Click | Submits parameters for search |
| Reset Search | On click | Resets search results and parameters |
| Category | Actions | Outputs |
|---|---|---|
| Articles | On Click of Browse Link | All articles rendered in card form |
| Learn More | On Click | Opens up to full article information |
| Delete Button | On Click | Handles delete of document |
| Edit Icon | On Click | Opens up edit page with selected parameters filled |
| Add Comment | On Click | Submits and renders added comment on page |
| Edit Comment Icon | On Click | Add comment text field switches to allow edit with inputs filled |
| Delete Comment | On Click | Deletes comment from page |
| Category | Actions | Outputs |
|---|---|---|
| Form fields | Text Input | Form updated as user is typing |
| Check Box | On Select | Captures selected boxes |
| Dropdown | Filter Body Tags | Captures selected tag |
| Submit Button | Form Validation | Validation runs and error is shown if not completed |
- React
- MUI v5
- React Bootstrap
- Moment js for basic date-time conversions
- NodeJs for backend API routes
- Axios
- MongoDb for database info
- Deployment was done using Netlify
- Backend deployment done on Heroku