Repo

Description

Its a simple Todo List built with amazing features ✨

Tech Stack

TechnologyPurpose
Next JSNextJS is a React framework for production. It enables functionality such as server-side rendering and generating static websites for React based web applications.
MantineUIMantine is a React UI library with a focus on developer experience and usability.
FirebaseFirebase is a platform developed by Google for creating mobile and web applications.
VercelVercel is a cloud platform for static sites and Serverless Functions.
TypeScriptTypeScript is a superset of JavaScript that compiles to clean JavaScript output.
YarnYarn is a package manager that doubles down as project manager.

Features

  • Google-Authentication [x]
  • Rich-Text Editor [x]
  • Markdown-support [x]
  • Cross-Platform [x]
  • Light-weight [x]
  • Fast and Responsive [x]
  • Theme-toggle [x]
  • Simple to use [x]

Set Up

  • Clone the repository and install the dependencies.
git clone https://github.com/Aniumbott/Taskbit.git
cd TaskBit
yarn install

  • Now to set-up firebase.

  • Create a project on firebase named taskbit-app.

  • After the project is created, go to the project settings and add the following domains to the authorized domains list. Add the following domains to the authorized domains list add localhost:3000.

  • At the end you will recieve this. firebase

  • Now go to your local and make an .env.local file and add the following code with the values shown above.

NEXT_PUBLIC_ApiKey=
NEXT_PUBLIC_AuthDomain=
NEXT_PUBLIC_ProjectId=
NEXT_PUBLIC_StorageBucket=
NEXT_PUBLIC_MessagingSenderId=
NEXT_PUBLIC_AppId=
NEXT_PUBLIC_MeasurementId=
  • Now you can run the project locally, By running the following command.
yarn run dev

And that’s it, you can now access the project on, http://localhost:3000/. 🔥

Usage

  • Go to https://taskbit.vercel.app/ (Deployed on vercel)

  • First you will be greeted with the auth page, where you can login with your google account. auth-page

  • Once you are logged in, you will be greeted with the home page, where you can add your tasks, by clicking th + button. And a pop-up will appear, where you can edit your task, By clicking the edit button.

  • You can also add a color to your task by clicking the color button and delete the task by clicking the delete button. add-task

  • It have a Rich-Text Editor by which you can add your task in a markdown way. task

  • Clicking the save button will save your task.

  • You can change the sattus by <-> button and order of the tasks by clicking the arrows above the number.

  • You can also change the theme of the app by clicking the theme button.

home-page

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. Repo