Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/juliankrzysiak/water-schedule
Tracks what dates you watered your plants, and when to water them next based on a provided schedule
https://github.com/juliankrzysiak/water-schedule
calendar-view garden plants scheduler watering-plants
Last synced: 18 days ago
JSON representation
Tracks what dates you watered your plants, and when to water them next based on a provided schedule
- Host: GitHub
- URL: https://github.com/juliankrzysiak/water-schedule
- Owner: juliankrzysiak
- License: mit
- Created: 2023-05-28T21:59:07.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-28T05:43:39.000Z (4 months ago)
- Last Synced: 2024-08-28T06:48:18.093Z (4 months ago)
- Topics: calendar-view, garden, plants, scheduler, watering-plants
- Language: TypeScript
- Homepage: https://water-schedule.pages.dev
- Size: 953 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
Hydration
A watering schedule for your plants.
Keeps track of when you need to water your plants based on provided schedules.
Uses a monthly calendar to easily keep tabs on when your babies need some hydration.
View Demo
·
Report Bug
·
Request Feature
## About The Project
Desktop | Mobile
-------------------------|-------------------------
| 
### Built With
### How It's Made
I needed a simple way to track when to water my native plants since I kept forgetting, so I made this.
For the backend, I stuck with the trustworthy Express.
For my database, I went with PostGreSQL instead of MongoDB, since I thought a relational database would fit my needs better, and I wanted to learn SQL.
Because of that, I just went with using raw SQL queries instead of abstracting it away via Object Relational Mapping
I also implemented testing for the backend with a test database to ensure my queries and REST calls were doing the right thing.
For the frontend, I went with React againt to hone my skills.
As the need for global state management eventually came, I opted for Zustand instead of Redux w/ RTK. Much simpler to use.
For data fetching and caching, I opted for Tanstack Query instead of RTK Query. They both seem to be similar in performance. While RTK seems a bit more flexible, Tanstack Query was much simpler to use and got the job done the same, so I will most likely use this for future projects.
I also wanted to use navigable pages, so I added React Router for routing purposes.
I used Firebase just for authorization purposes. I had already worked with auth in the past, and I would rather trust a competent library than waste time introducing security risks.
Due to the larger scope of the project, I drew inspiration from [Bulletproof React](https://github.com/alan2207/bulletproof-react) for restructuring my frontend file structure.
In essence, I broke down specific portions of the project into different features, where one could find all the relevant components, libs, utils, etc.
I also wanted to focus on creating a more streamlined deployment process, so I created a CI/CD pipeline using Github Actions.
My pipeline tests, lints, and deploys either the client or the server based on detected changes. Tags are automatically created for easier bug tracking.
In essence, the client and server are two projects that can be run independently and are lumped together for ease of development.
### Optimizations
Initially, I had formulated the API so that one POST request would mark one plant as watered.
But when I added a feature to water all the plants on one day at the same time, I initially just made a loop working on each plant. So I was making many singular POST requests in succession...
So I refactored the backend to accept an array of dates to add to the database, only now needing one request.
I refactored the code to remove extraneous usage of global state management. The usage of routing allowed me to move away from this reliance I had done in an earlier project.
I narrowed it down to just communicating the calendar date to all other components and a toast notification whenever a query is completed.
The use of Tanstack Query, which includes caching, helps with saving data when the same data has been seen before.
In the future, I will move the static assets to a CDN for smaller bundle sizes.
### Learning Outcomes
| The Good | The Bad | The Ugly |
|----------------------------------------|------------------------------------------------------|----------|
| Used a more organized file structure for easier navigation and scalability | I should have designed the website from the beginning, designing while developing wastes time and leads to less coherent designs ||
| Utilized routing for easier UX and DX | Took a while to figure out user authorization and protected routes||
| Learnt to deploy the frontend and backend separately and to different providers| ||
| Created a CI/CD pipeline for easier deployment and lowering the possibility of bugs being pushed into prod|||
| Tried out new technologies that lead to a better DX, making future projects more efficient and more enjoyable to work with | |
| SQL is great, I will probably stick with relational databases from now on |||
| It is very satisfying creating a project that I will use in my daily life |||
## Getting Started
### Prerequisites
* pnpm
```
npm install -g pnpm
```
### Installation
1. Clone the repo
```
git clone https://github.com/CastillejaCode/water-schedule.git
```
2. Install NPM packages
```
pnpm --filter client --filter server install
```
3. Run local development server
```
pnpm --filter client --filter server dev
```
It's probably better to just open a terminal for each folder and ```pnpm dev``` to better compartmentalize the frontend and backend.
5. Switch out my info for yours
You'll want to add your own secrets for info such as the port, database urls, authorization urls connecting to Firebase.
## License
Distributed under the MIT License. See `LICENSE.txt` for more information.
## Contact
Julian Krzysiak - [email protected]
## Acknowledgments
* Favicon generator - [RealFaviconGenerator](https://realfavicongenerator.net/)
* Icons - [Ionicons](https://ionic.io/ionicons)
* Readme Template - [Best-README-Template](https://github.com/othneildrew/Best-README-Template)
* File Structure - [Bulletproof React](https://github.com/alan2207/bulletproof-react)