Rapt

screenshot of Rapt
express
react
daisyui
prisma

Rapt

About Rapt is a full-stack time-tracker and pomodoro app, designed to address concerns of a neurodiverse focus group about productivity systems.

Overview:

Rapt is a full-stack time-tracker and pomodoro app built to meet the needs of a neurodiverse focus group who were not finding traditional productivity apps helpful. The main focus of the app is on data modeling and visualization to track history and provide feedback to users. It allows users to timebox different types of sessions, annotate and save their sessions, and view a graph of their activities. The front end is built with React, React Router, and TanStack Query, while the back end uses Node/Express, Postgres, Prisma, and Passport.

Features:

  • Customizable session types: Users can choose what type of session they want to timebox, whether it's a work session or a break session.
  • Annotation and session saving: Users can annotate their sessions and save them for later reference.
  • History visualization: The app provides a graph to show users the activities they have worked on, sorted by duration.

Installation:

To get started with Rapt:

  1. Clone the repository.
  2. Install the required NPM packages.
  3. Set up a PostgreSQL-as-a-service instance, such as ElephantSQL or Railway.
  4. Fill in the values in the .env.example file and rename it to .env. Make sure to provide the database URL provided by the PostgreSQL service.
  5. In the project's root, run Prisma Migrate to initialize the database with the schema defined in prisma/prisma.schema.
  6. Run npm run dev in the root directory for the server and the client folder for the front end.

Summary:

Rapt is a time-tracking app designed to cater to the needs of a neurodiverse focus group. It offers customizable session types, annotation and session-saving features, and a history visualization graph. The app utilizes technologies such as React, React Router, TanStack Query, Node/Express, Postgres, Prisma, and Passport. Installation can be done by cloning the repo, installing NPM packages, setting up a PostgreSQL instance, and running the necessary commands. The app also outlines future optimizations and features planned for the roadmap.

express
Express

Express.js is a simple Node.js framework for single, multi-page, and hybrid web applications.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

daisyui
daisyUI

daisyUI adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.

prisma
Prisma

Prisma is a server-side library that helps developers read and write data to the database in an intuitive, efficient and safe way.

fullstack
Fullstack Boilerplates

A fullstack boilerplate provides a starter application that includes both frontend and backend. It should include database, auth, payments, user roles and other backend services to build a fully featured saas or webapps.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.

Zustand

Zustand is a lightweight state management library for React that provides a simple and intuitive API for managing state in your application. It allows developers to easily create and manage global state, and provides a powerful set of tools for optimizing performance and improving developer productivity. Zustand is designed to be easy to use and easy to learn, making it a popular choice for developers of all skill levels.