├── README.md └── task-description.md /README.md: -------------------------------------------------------------------------------- 1 | # Independent Service Provider Website 2 | 3 | ## [Private Repo Link](https://classroom.github.com/a/uAx5ttlP) 4 | Click here to create private repo: [https://classroom.github.com/a/uAx5ttlP](https://classroom.github.com/a/uAx5ttlP) 5 | -------------------------------------------------------------------------------- /task-description.md: -------------------------------------------------------------------------------- 1 | # Task Description: 2 | We are looking for a web developer who can build websites for an Independent Service Provider. You must be familiar with `React`, `firebase`, `react router`, etc. 3 | 4 | Here is the task that you need to do. 5 | 6 | 7 | ## Task Detail: 8 | 1. A website for an individual who provides services. It could be a website for a gym trainer, Tourist/Travel guide, Lawyer, Photographer (wedding photographer, sports photographer, journalism photographer, wild photographer, etc.), Immigration & VISA Consultant, Accountant, Doctor/Dentist (single doctor. not a hospital or a diagnostic center), Tutor, Career Coach, Corporate Sales Trainer, Independent TV Host, Independent Consultant, Model, Actor, Writer, matchmaker, realtor, broker, Journalist, youtuber, home food catering, etc. Please note that you will select one of the options mentioned above. It has to be a person providing services, not an organization or person working in an organization. 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) 9 | 10 | 11 | 2. Make sure your design and website idea is unique. First, finalize your idea (What type of website do you want to build). Then google the site design or visit ThemeForest to get your website idea. However, your website can not be related to your previous assignments or any demo project displayed in the course or in our conceptual sessions. 12 | ---- 13 | 3. Give your website a name. The name should appear on the website and be displayed on the website's title. 14 | 4. Home page will have a header (simple navbar), banner, services section, and a footer. The banner could be static or a carousel. Either one will be alright. 15 | 5. Add One extra section on the home page in addition to the 4 sections (header, banner, services, and footer) mentioned above. 16 | 17 | ---- 18 | 6. The Services section will have at least 3 services. You can put one, two, or more services in a row based on your design. Each service should have a relevant name, price, image, short description, and a specific button. 19 | 20 | 7. Clicking on the button will take the user to the Checkout route. This route will be private/protected routes. Please make sure that the private route redirects to the login page if the user is not logged in. After login, the user will be redirected to the checkout page 21 | 22 | 8. You can put anything on the checkout page. If you want to do some extra optional work, please read the optional but highly recommended section of this description. 23 | 24 | 9. If you reload the protected/private route (after login), this page will not redirect the user to the login page. Instead, it will keep the logged-in user on the protected route. 25 | ------- 26 | 10. You Must implement Email-password based authentication. You will have to implement the Registration and the login page. Users should be able to toggle between Login and Registration view. You can use `react firebase hook` to implement the login system. And don't forget to make the Email and password field a required field. 27 | 11. Also, implement at least one extra login, which could be (facebook, github, google, etc). 28 | 29 | 12. Once logged in, the log out/sign out button should appear on the header, which will log out the user once clicked. 30 | ---- 31 | 13. Add two more routes. one route will be `blogs`. On the blog page, you will need to answer these three questions. This won't be a protected route 32 | 33 | 13.1 Difference between `authorization` and `authentication` 34 | 35 | 13.2 Why are you using `firebase`? What other options do you have to implement authentication? 36 | 37 | 13.3 What other services does `firebase` provide other than authentication 38 | 39 | 40 | 14. You will create an about me page. It could be the `about` route. There will put your name and your image (picture is optional. However, if you put a photo, please put a professional look picture). And write a small paragraph (3-5 lines) about your goal. And how you will work hard to achieve your goal. 41 | ---- 42 | 15. Create a 404 page (not found page) 43 | 16. Minimum 9 meaningful git commit 44 | 45 | 46 | ## Bonus: 47 | 1. Make the website meaningful and consistent in look and feel. Give your website a relevant name. Images and all the content of the website have to be appropriate. No `lorem ipsum` please. 48 | 2. Meaningful `readme.md` file containing your website name, and link to your live site. And at least five bullet points mentioning your website's different features and functionality. And a list of technologies (frameworks, libraries) used in your project. 49 | 3. Make the `home` page of your website responsive. Make sure the site looks different on desktop and mobile responsive. Tablet responsive is optional. 50 | 4. Clean and organized Code. Organize components and add comments when needed 51 | 5. Display error when user email address or password don't match. 52 | 6. Send Email Verification. Don't worry if the email goes to the spam folder or it doesn't go at all. As long as your code is there, you will be fine. 53 | 7. Add a link for Password reset (use toast) 54 | 55 | 56 | ### Optional But Highly Recommended: 57 | 1. Your checkout page will be a dynamic route with route parameter having the id of the service user created. In the checkout page, you will have a simple form that you will have fields for user name, user email address, address, and phone number. Once the user submits the form, you will display the user, `thank you for the booking.` 58 | 2. Use the Environment variable to hide the firebase key 59 | 3. Add active routes to see which route you are. 60 | 4. If possible, make the entire website responsive. Once you are done making the home page responsive, you wont need much things to do to make the entire website responsive. 61 | 62 | ### Optional: 63 | 1. For the Checkout page, you can use basic html form or any css library. However, we encourage you to try out the `react hook form`. 64 | 3. Add some mouseover animation while taking the mouse on the services card 65 | 4. If you want to take a challenge. consider using `react-leaflet` anywhere in your application 66 | 5. Please Use icons whenever applicable and use fonts 67 | 6. Make the footer a little more realistic 68 | 7. Optimize your images 69 | 8. Add something extra of your own. This will help you in the future to differentiate your project from others. 70 | 9. Allow creation of multiple accounts with the same email address (is optional) 71 | 72 | 73 | ### Additional information: 74 | 1. If needed, create your own fake data. You can load the data from a `.json` file or host it anywhere you want. 75 | 2. You can use a local image or host image anywhere or both. 76 | 3. You are free to use any CSS library (bootstrap, tailwind) you want. if you want, you can use both `bootstrap` and `react-bootstrap`. Also, if you want, you can use any `tailwind` component library. 77 | 4. If needed you can mix CSS framework with a component library 78 | 5. Try to host your site on Firebase (netlifiy host will need extra configuration) 79 | 6. If you have any issues with hosting or Github push, please join the Github and deploy a related support session 80 | 81 | ### What to submit: 82 | 1. Your Github repository 83 | 2. Your live website link 84 | 85 | ### Some Guidelines: 86 | 1. Do not waste much time on the website idea. Just spend 30 minutes deciding, find a sample website, and start working on it. 87 | 2. Do not waste much time finding the right image. You can always start with a simple idea. Make the website and then add different images. 88 | 3. Don't look at the overall task list. Just take one task at a time and do it. Once that is done, pick the next task. If you got stuck on one task, move on to the next task. 89 | 2. Stay calm, think and work sequentially. You will make it. 90 | 91 | --- 92 | ### No Pain, No gain: 93 | `Have Patience! Work Hard! YOu will surprise yourself, and eventually, you will be proud of yourself.` 94 | --------------------------------------------------------------------------------