🔗 Visit Houseplants Guide here!
Houseplants Guide is a page where the user can get inspiration for house decoration with plants, find plants that are suitable for specific conditions and find care instructions of individual plants. Admin(s) can add new plants with images and information, for example watering and nutrition needs.
- Home - a fresh and simple landing page welcoming the user.
- All Plants - a page showing all plants added to the app in a grid. On this page the user can:
- sort plants alpabetically
- filter by watering or light needs, or if the plant is air purifying
- search by English and scientific name
- get to a plant page by clicking a plant card
- Plant page - a page containing an image slider, information about the plant and caring instructions.
An admin authenticates via /login. For an authenticated user the page looks a bit different.
- Add plant - a form for adding a plant
- Delete plants - a table for deleting plants
- Animations visualizing deleting a plant (a row in the table)
- Alerts informing the admin of successful actions or errors
The following Firebase services are used in this app:
- Cloud Firestore is used to store data.
- Firebase Auth is used to enable authentication with a Google account.
- Firebase Admin SDK and Custom Claims makes it only possible for an admin to add and delete plant documents.
- Firebase Hosting is used for hosting the app.
- Written in TypeScript using ReactJS
- Bootstrapped with Create React App
npm startin the project directory runs the app in the development mode.