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

• Material UI

  290 91,600 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.

• strapi-habit-tracker

  1 0 0.0 JavaScript

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

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• Strapi

  458 59,941 10.0 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.

• React

  1,693 221,803 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.

• foundation

  210 86 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.

• date-fns

  115 33,682 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