Building a Personal Habit Tracker App with Custom DB Queries in Strapi

1. Material UI

   1 300 95,172 10.0 TypeScript

   Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.

   

   For this tutorial, you’ll use the MUI library (previously called Material-UI) to get access to a built-in datepicker. Thankfully, MUI comes with a starter project with Create React App.

2. CodeRabbit

   coderabbit.ai featured

   CodeRabbit: AI Code Reviews for Developers. Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.

   

3. strapi-habit-tracker

   2 1 0 0.0 JavaScript

   

   If you want to clone the project and follow along in your own editor, use this GitHub repo.

4. Strapi

   3 496 65,803 9.9 TypeScript

   🚀 Strapi is the leading open-source headless CMS. It’s 100% JavaScript/TypeScript, fully customizable, and developer-first.

   

   Strapi is a headless CMS built entirely with JavaScript. Whether your preference leans more toward REST or GraphQL, Strapi offers built-in support for both. As a result, you can use the frontend of your choice and simply connect to the Strapi API.

5. React

   4 1,918 233,739 9.9 JavaScript

   The library for web and native user interfaces.

   

   In this article, you’ll be building a personal habit tracker. To begin, you will set up your Strapi backend project and build a few collections for your habits and logs to track completion. Then you’ll set up your React project to create, display, and check off habits. Finally, you’ll discover how to create custom queries to fetch habits so it’s easier to track completion on the frontend.

6. foundation

   5 239 89 0.0

   GraphQL Foundation Charter and Legal Documents (by graphql)

   

   Strapi is a headless CMS built entirely with JavaScript. Whether your preference leans more toward REST or GraphQL, Strapi offers built-in support for both. As a result, you can use the frontend of your choice and simply connect to the Strapi API.

7. date-fns

   6 125 35,561 9.3 TypeScript

   ⏳ Modern JavaScript date utility library ⌛️

   

   Then install a few necessary libraries. In this project, you’ll be using one of the four date-libraries supported called date-fns. You also need axios for making HTTP requests and qs for parsing/creating queries. You can get all the libraries needed by running one command:

Suggest a related project