├── README.md └── task_description.md /README.md: -------------------------------------------------------------------------------- 1 | # Service Review Website 2 | Make sure you create two private repos. One for the client side. Another for the server side. 3 | 4 | ## [Client Side Private repo link](https://classroom.github.com/a/OjUud5b2) 5 | Click here for the private repo: [https://classroom.github.com/a/OjUud5b2](https://classroom.github.com/a/OjUud5b2) 6 | 7 | 8 | 9 | ## [Server Side Private repo link](https://classroom.github.com/a/y-8jL3e7) 10 | Click here for the private repo: [https://classroom.github.com/a/y-8jL3e7](https://classroom.github.com/a/y-8jL3e7) 11 | -------------------------------------------------------------------------------- /task_description.md: -------------------------------------------------------------------------------- 1 | ## Task Description: 2 | Our company focuses on quality services with honest user reviews. Currently, we are looking for a front-end web developer to build a full-stack website using `React`, `firebase`, `react router`, `node`, `express`, `mongodb` etc. 3 | 4 | Make sure your website design is unique. Visit ThemeForest, Dribble, google, etc., to get some ideas. 5 | 6 | Try to explore component libraries other than DaisyUI. Remember, a unique project will add more value to your portfolio. 7 | 8 | However, your website **cannot** be related to your **previous assignments** or any **practice project** shown in the course modules or our **conceptual sessions.** If any similarities are found, you will get **zero(0)** as a penalty. 9 | 10 | ## Service review website 11 | 12 | **Examples:** Online delivery service review, Online trainer review, travel/tourist service, Lawyer, Photographer (wedding photographer, sports photographer, journalism photographer, wild photographer, etc.), Immigration & VISA Consultant, Tax Lawyer, Accountant Service, Doctor/Dentist (single doctor. not a hospital or a diagnostic center), Journalist, YouTuber, Cloud kitchen, etc. If you have another idea for an individual service provider, please let us know before proceeding. (Please note that your website can not be related to a marketplace freelancer working on fiver, Upwork, etc. It can not be a portfolio website) 13 | 14 | ### Main Requirements 15 | 16 | 1. The homepage will have a Navbar, a slider/banner/ a meaningful section. Under the navbar, display a list of services. There will be at least 6 services in the database, but here, you will `limit` the number to only 3 i.e. on the home page, you will show maximum of 3 services (this should be done in the backend). Also, add a meaningful footer. 17 | 2. There will be a " **see all**" button/icon under the 3 services. When clicking the button/icon, take the user to the _/services_ route and show all the services on that page. 18 | 3. Add two extra sections on the home page. Make sure it is unique and relevant to your website. 19 | 4. The services of the home page and the services of the services page will have the name of the service, image, rating(optional), price, a short description(maximum 100 characters), and a view details button with each service card. 20 | 5. When clicking on the image of the service, the picture will be viewed on full screen. Explore the package [react-photo-view](https://react-photo-view.vercel.app/en-US) for that. 21 | 6. On clicking the view details button, the user will be taken to the service details page: _/services/:id_ route 22 | 7. The service details route will have two sections. 23 | 24 | 7.1. **Service section:-** show all the details of that Service with full description. 25 | 26 | 7.2. **Review section:-** there will be a review section where a user can see others' reviews of that service. A review should contain a text, name, and image of the reviewer, rating(optional). The user can also **add his/her own review** for that service. But he needs to log in first. If the user is not logged in(use conditional rendering), show a text like: Please login to add a review. After clicking the login button/link, take him to the login page. Otherwise, show a form with a text area and a button to add his review(rating is optional). Please store the user info (email, etc.) and service info (service id, etc.) with each review to display the reviews correctly with the relevant service. 27 | 28 | 8. Implement email/password-based authentication and at least one social login(google, Facebook, GitHub, etc.) authentication. Please skip the email verification part here, because it will create some inconvenience for the examiner. It is important for the examiner to be able to check your authentication without any hassle. If you want, you can add email verification after getting the assignment result. 29 | 9. Once a user is logged in, he/she will see more options like My reviews, Add service, and the logout button in the navbar. 30 | 10. The "My reviews" page will be a private route and show only the reviews that the current user added either in a table or in cards with relevant information like - service name, review etc. There will be two buttons/icons - edit review(details in the bonus part) and **delete review** with each review. On clicking the delete button/icon, you have to delete the review, and it won't show up on that service page anymore. When the delete is successful, a toast/modal with a message will pop up to inform the user. If the user doesn't add any review, the page will show 'No reviews were added' at the middle of the page 31 | 11. On the "Add service" page(also a private route), you can **add a service** and that service will be shown on the home page. When the service is added successfully, a toast/modal with a message will pop up to inform the user. 32 | 12. No Fake data (data must be hosted on the database). The database could be MongoDB or any other NoSQL database. 33 | 13. Add one more public route: Blogs. You will have to answer the following questions on the Blog page 34 | 35 | - Difference between SQL and NoSQL 36 | - What is JWT, and how does it work? 37 | - What is the difference between javascript and NodeJS? 38 | - How does NodeJS handle multiple requests at the same time? 39 | 40 | ### Bonus Requirements 41 | 42 | 1. Your Readme file for the client-side repo should have details about your project's features and functionalities in bullet points(at least five bullet points) and your live link. Adding a meaningful readme file for the server-side repo is optional. 43 | 2. At least 15 meaningful GitHub commits for the client-side and 8 meaningful commits for the server-side repository. 44 | 3. Your code should be clean and organized. Comments should be added where necessary 45 | 46 | 1. The **title of the page** will change with the page you visit. It should not be the same for every route 47 | 2. Add a meaningful favicon 48 | 3. Add a **spinner** on the services page, and the login and register page. If data is loading, a spinner will be displayed. 49 | 4. use the **Environment** Environment variable on both the client (firebase config) and server-side (mongodb credentials, Access token secret). Use .gitignore file on the server side. 50 | 5. Implement the basic version of the **JWT** **token** for email/password-based authentication. Upon login, you will create a jwt token and store it on the client side, and for the "My reviews" page, you will send the token and verify the user. Implementing 401 and 403 is optional. 51 | 6. In the "My reviews" page, clicking the **edit review** button/icon shows that review in a modal/in a new route and lets the user update it. 52 | 7. **Simple challenge** In the service details page, **sort the reviews in a descending order** by inserting time(you have to keep the inserting time when you add a review, you can do it with the Date object, or you can explore MongoDB documentation). You will have to implement this code on the server side. 53 | 54 | ### Optional 55 | 1. Use pagination on the services page. 56 | 3. Show the rating with star icons in a user review 57 | 4. 2. Try to use a better-looking confirmation dialogue other than the browser's default confirm. 58 | 3. On the `add a service` page, try to implement direct image upload from your computer. This image can be hosted on a third party image hosting like imgbb or directly to mongodb 59 | 4. Add some animation while applicable. 60 | 5. Please Use icons whenever applicable and use fonts (google fonts) 61 | 6. Make the footer a little more realistic with the copyright symbol and year. 62 | 7. Optimize your images 63 | 8. Add something extra of your own. This will help you in the future. 64 | 65 | ### Additional information: 66 | 1. You can use vanilla CSS, any CSS library, framework, or component library you want. 67 | 4. If possible, try another component library other than daisyUI 68 | 5. If needed, you can mix a CSS framework with a component library 69 | 6. You may use `react hook form`, basic html form or any library for authentication 70 | 7. Store JWT token in http only cookie (alternatively, feel free to store it in the Local storage for this assignment) 71 | 9. Try to host your site on Firebase (Netlify host will need extra configuration) 72 | 10. Try to host the server on Vercel 73 | 74 | ### What to submit 75 | 1. Your client-side code GitHub repository 76 | 2. Your server-side code GitHub repository 77 | 3. Your live website link 78 | 79 | 80 | Have FUN! Have Patience. 81 | --------------------------------------------------------------------------------