I had it in mind ever since I began my career as a Frontend Engineer that it'd be cool to have created my own task manager but I had always put it off due to not being skilled enough mostly and also having the time to actually make it happen. Now I learnt about the Planetscale X Hashnode hackathon two weeks ago so I thought I'd give myself a shot and here I am two weeks later and I must say I'm quite happy with my build.
Blaze - What I was able to build.
Blaze is essentially a project or task management tool that I thought could help a lot of people manage their schedules, tasks and also even take notes and have little diaries that catered to different things allowing me or users to have their day planned out and keep their affairs in order. It was inspired by my time as a noob developer trying immensely to get things done, but struggling however on what to do after making a creating a certain feature or fixing a certain item on an app i wished to build. I had zero plans and was just making it all up as I went and I think a lot of new developers struggle with this too so I thought what if i could create my own task manger to just have a certain structure for my projects and subsequently other things as well.
Here is the live link : https://blazee.vercel.app
How was Blaze built?
I built Blaze hurriedly in two weeks even though the concept had been in my mind for a while now, I relied strongly on Next js with Typescript(you definitely don't want Javasccript troubles :) ) and Chakra UI to provide an access to building zappy UI interfaces fast and easy so I don't have to worry too much about styling with css files coz it'd be a bummer with only two weeks on my watch. I also integrated Firebase into Blaze to create easily users with authentication and authorization by signing in with their emails and most importantly housing all user data in Planetscale.
The Build up.
- The Landing page.
- The Sign Up page.
- The Login Page.
- The Dashboard.
- The Notes page.
- The Profile page
1. Welcome to Blaze
Here we have a simple landing page that describes my application and has action buttons to either log a user in, or sign a user up if the user does not exist on the applications database.
2. Blaze Up!!! (Signing a user up)
For the signup page, I created a basic form that allows user sign up with their unique usernames, emails , creating and validating their password. Once a user clicks on the sign up button, a call is made to Firebase to register the user with their info (email and password). This is also stored safely in the Planetscale database as soon as the user proceeds to sign up.
Firebase creates basic form control measures like checking if the password is weak. Or if the email had already been used etc.
3. Blaze In!!! (Logging in)
For the login page, I created a basic form that allows user sign in with their preregistered emails and password. Once a user clicks on the signin button, a call is made to Firebase to check if the user with their info (email and password) exists.
4. The Sacred Dashboard
For the dashboard I created a simple and elegant design with a navbar section that contains basic info like the user's username which they registered on the signup page, The current display date, a theme button and a user avatar for their profile image.
The theme button allows you to switch between light and dark mode.
The Bat (Dark) Mode
When a user clicks on Add a new task button on the To-Do column, they are presented with a modal that has a form containing the task title, the task description and the task label which has the critical , high priority and low priority options.
When the add task button is clicked. The data from the modal is stored in the planetscale database which it is then fetched and rendered under the page
A user can also edit previous tasks information like the title, label or description
A user can also move the tasks from one column to another, say a task is WIP or To be reviewed, said tasks can be moved around to show their current state.
5. Notes Page
I created a notes page where users can keep notes of what they wan't to do or notes about anything really. To create a note you click on the Add a note button. It shows a modal that contains a form of note title, note body and the tag (School, Work, Personal).
6. Profile page.
The profile page essentially contains information about the user like his bio, full name , contact details, email
A user can edit his or her profile by editing the fields and clicking on the Click to update button
.
Conclusion
Planetscale is a really easy platform to manage and host your databases as it is extremely easy to setup using prisma or Node. They have amazing documentation and I was really happy to see James Quick and Camilla make very interesting tutorials about setting Planetscale up, They were exceptional at delivering the required information. I would encourage people to try out the tech. The Planetscale console was a really exciting place to check data too. Could use some UX upgrade like having the table overflow safely in view to accomodate fields with lengthy data and localstorage memory for previously entered command after a reload or refresh but overall hats off to the Planetscale team for bringing such an amazing solution to databases
I really had fun building this project with and if you would like to contribute to the project : Here's the github link: https://github.com/draqist/Blaze
You can also reach out to me via email:
abdullahabdulfatah526@gmail.com
via twitter:
Till then i humbly remain Draq.