├── README.md └── task_description.md /README.md: -------------------------------------------------------------------------------- 1 | # Health-related-website 2 | 3 | ## This private repo link is no longer available. If you want to work on this project, use your own public repo 4 | -------------------------------------------------------------------------------- /task_description.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## Task Description: 4 | Our company focused on healthcare related services. Currently, we are looking for a front-end web developer to build our brand new website using `React`, `firebase`, `react router`, etc. 5 | 6 | We have a sample task for you. 7 | 8 | 9 | ### Task Detail: 10 | 1. Website has to be a healthcare related website. It could be related to a general hospital, specialized hospital, diagnostic Lab, Doctors' chamber, Dental clinic, eye care hospital, Pharmacy, medicine, physical therapy, exercise, gym, healthcare tech, nursing service, elderly home, mental care, Feminine care, Ambulance service, etc. 11 | 12 | 13 | 2. Make sure your design and website idea is unique. First, finalize your idea (what type of website 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. 14 | 3. Home page will have a header (simple navbar), banner, services, and footer 15 | 4. Add two extra sections in the home page in addition to the 4 sections mentioned above. 16 | 17 | 18 | 19 | 20 | 5. The Services section will have at least 6 services. You can put one or more services in a row based on your design. Each service should have a relevant name, image, short description and a specific button. 21 | 6. Clicking on the button will take the user to the service detail route. Each route should display detailed information of the service along with the image of the service. 22 | 7. This route will be private/protected routes. Please make sure that if the user is not logged in, the private route redirects to the login page. 23 | 24 | 8. You Must implement Email and password based Authentication. This means, you will have to implement the Registration and the login page. Users should be able to toggle between Login and Registration view . 25 | 9. Also, implement at least one extra login which could be (facebook, github, google, etc). 26 | 10. Once logged in, the user name, logout button should appear on the header which will log out the user once clicked. Displaying user profile pic on the header is optional. 27 | 11. Add two more routes. Relevant to your website. These two routes will be private. You can put anything relevant to your site on these two routes. 28 | 12. Will need a 404 page (not found page) 29 | 30 | 31 | 32 | ### Bonus: 33 | 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 has to be relevant. No `lorem ipsum` please. 34 | 2. Meaningful `readme.md` file containing your website name, a little description, link to your live site. And at least five bullet points mentioning different features and functionality of your website. 35 | 3. After reloading the page on a private route, the user should not be redirected to the login page. 36 | 4. Make the website responsive. Make sure the site looks different on desktop and mobile responsive. Tablet responsive is optional 37 | 5. Use Context API 38 | 6. Clean and organized Code. Organize components and add comments when needed 39 | 7. Display some error when user email address or password don't match. 40 | 41 | 42 | ### Optional: 43 | 1. Though Email and password validation is not mandatory for marks. We highly recommend to implement those. 44 | 2. You may use `react hook form`, basic html form or any library for authentication 45 | 3. Add some mouseover animation while taking the mouse on the services card 46 | 4. If you want to take a challenge. consider using `react-leaflet` 47 | 5. Please Use icons whenever applicable and use fonts 48 | 6. Make the footer little more realistic 49 | 7. Optimize your images 50 | 8. Add something extra of your own. This will help you in the future. 51 | 9. Allow creation of multiple accounts with the same email address 52 | 53 | 54 | ### Additional information: 55 | 1. If needed, create your own fake data. you can load the data from a `.json` file or you can host it anywhere you want. 56 | 2. You can use local image or host image anywhere if you want or both. 57 | 3. You are free to use any css library you want. But, we recommend using tailwind css. 58 | 4. If needed you can mix CSS framework with a component library 59 | 5. Use firebase auth 60 | 6. Local storage is optional 61 | 7. Environment variable is recommended but optional 62 | 8. Try to host your site on Firebase (netlifiy host will need extra configuration) 63 | 64 | ### What to submit 65 | 1. Your github repository 66 | 2. Your live website link 67 | 68 | 69 | 70 | Have FUN! Have Patience. 71 | --------------------------------------------------------------------------------