/Habits

Habits | Rocketseat - NLW Setup

Primary LanguageTypeScript

Logo Habits


TypeScript React React Native TailwindCSS Expo Vite Prisma Fastify

Table of Contents

πŸ“‘ About

This project was developed during Next Level Week, a week long event created by Rocketseat to help developers reach new and exciting levels of development skills. NLW - Setup lasted from the 16th to the 20th of January 2023.

Habits is an app / website designed for you to keep track of your tasks. It can serve as both a reminder of your daily to-dos and a motivator for you to actually do them.

🎨 Layout

Cover image

This Layout was created by Diego Fernandes and Rodrigo Gonçalves, and you can access it on Figma:

More information can be found at:

πŸ› οΈ Functionalities

  • Add, edit and remove habits
  • Keep track of your habits
  • Login with Google
  • Beautiful layout
  • Works on mobile and web

πŸ“š What I Learned

Coming into NLW - Setup I didn't know exactly what to expect. It had been a little more than a week since I had my first contact with React and I was afraid I wouldn't be able to keep up.

In the end it worked out fine. I was able to keep up with the classes with ease and learn a lot throughout. I expanded my knowledge of React, learnt a little bit of React Native and explored new technologies like Tailwind, Expo, Vite and Prisma, which will for sure be a part of my tech stack from now on.

πŸ” What I Did Different

Original project for reference: Original project

  • Added routing with React Router.
  • Added login page with Google and Firebase Authentication.
  • Generated avatars for users with DiceBear. Original avatars design was done by Micah Lanier under CC BY 4.0. It can be found on Figma.
  • Made it possible to edit user information.
  • Made it possible to edit and delete habits.

πŸ€” How To Use

- Clone this repository:
$ git clone https://github.com/Luhmeiy/Habits habits

- Enter the directory:
$ cd habits

- Install dependencies:
$ npm run install_all

πŸ’» Web App

- Run Web App
$ npm start

πŸ“± Mobile App

- You will first need to install Expo Go on your smartphone. Works on both iOS and Android.

- Run Mobile App
$ npm run database
$ npm run mobile

- Then scan the QR Code on the screen.

Linkedin Instagram