https://github.com/ushiradineth/cron
A Cron clone built to play around with React DND and rebuild some of the cool features of Cron.
https://github.com/ushiradineth/cron
calender cron nextjs react-dnd time-management vercel
Last synced: 7 months ago
JSON representation
A Cron clone built to play around with React DND and rebuild some of the cool features of Cron.
- Host: GitHub
- URL: https://github.com/ushiradineth/cron
- Owner: ushiradineth
- Created: 2024-02-11T03:13:18.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-09T21:26:57.000Z (8 months ago)
- Last Synced: 2025-02-09T22:19:22.753Z (8 months ago)
- Topics: calender, cron, nextjs, react-dnd, time-management, vercel
- Language: TypeScript
- Homepage: https://cron.ushira.com
- Size: 498 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Cron
- An Calander Management App made to learn Advanced UI Use Cases and Golang with Test Driven Development.
- Backend can be found [here](https://github.com/ushiradineth/cron-be).
## Technologies
### Frontend
- `TypeScript`
- `Next.js`
- `Dnd-kit`
- `Zustand`
- `NextAuth`
- `TanStack Query`
- `Tailwind CSS`
- `Zod`
### Backend
- `Go`
- `net/http`
- `PostgreSQL`
- `Test Containers`
- `Swaggo`
- `sqlx`
### Infrastructure
- `Docker`
- `Github Actions`
- `Vercel`
- `GitHub Container Registry`
## Features
- Here's what I learned and implemented on this project:
### Advanced UI drag and drop with Dnd-kit.
- Drag through a day to create a new event.
- Drag from the top or bottom of an event to extend or shorten it.
- Drag the event from the middle to move it to another day.
- Show previews of the changes done through the sidebar.
- Show previews of the changes done before create a new event.
- Show previews of the changes done through resizing an event.
- Lots of performance testing and bug fixes due to the complexity of the UI.
### State management with Zustand.
- I have not used state management libraries before on a personal project, so I used this opportunity to learn it.
- Manage the state of the events, settings and prerendered data with Zustand.
- Share state between the sidebar and calander view for previewing.
### TDD with Go.
- The flow of TDD is to write the test first, then write the code to make the test pass.
- The main goal of this project is to learn TDD, so I wrote the tests first.
### Test Containers.
- I used `Test Containers` to run the tests in a containerized environment.
- This allowed me to run the tests in a headless environment, which is important for the CI/CD pipeline.
## The Process
- This project took a while to complete due to work.
- I wanted to use this project as a canvas to try new technologies, which I was able to.
## Todo List
- Unfortunatly, this project is on hold as I am working on a few other projects that I would like to focus more on, however, this list would act as a roadmap if I do come back to this project.
### Frontend
- [ ] Light mode.
- [ ] Context menu to save changes.
- [ ] Settings page for user and calander settings.
- [ ] Add custom color palette for events.
- [ ] Events that span multiple days.
- [ ] Repeated events.
- [x] Timezone support.
- [ ] Monthly and yearly view.
### Backend
- [ ] Rate limiting.
- [x] Logging.
- [x] Metrics.
- [x] Tracing.
- [x] Kubernetes deployment with ArgoCD.
- [ ] Architecture Documentation.
### General
- [ ] Forget Password Flow.
- [ ] Email verification.
- [ ] Email only signup.
- [ ] Notion integration.
- [ ] Google Calendar integration.
- [ ] Google Contacts integration.
- [ ] Google Auth integration.
- [ ] Migrate from AuthJS to Better Auth.
- [ ] NextJS 15.
- [ ] React Suspense.
## Running the Project
- To run the project in your local environment, follow these steps:
- Clone the repository to your local machine.
- Clone the [backend](https://github.com/ushiradineth/cron-be) repository, and follow the instructions to run the backend.
- Copy the `.env.example` file to `.env` and fill in the required environment variables.
- Run `pnpm install` in the project directory to install the required dependencies.
- Run `pnpm dev` to get the project running.