Skip to content

Luhmeiy/Habits

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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