Startertab

screenshot of Startertab
nextjs
react
chakra-ui
prisma

Startertab

A custom new tab page, keeping all the best info handy (a work in progress, feedback is invaluable)

Overview:

The Starter Tab app is a dashboard that opens up on every new tab of your browser. It provides a centralized location to view all the information you want to see at a glance. The app is built using NextJS with ChakraUI and utilizes local storage to store your data, giving you ownership and control over your information. The app currently integrates with the Strava API for swim/run data, Spotify API for music controls and favorite artists, Weather API for weather data, Hacker News for top ask posts, and Stocks API for stock ticker information.

Features:

  • Centralized Dashboard: Displays all your desired information in one spot on every new tab.
  • Local Storage: Uses local storage to store your data, giving you control over your information.
  • API Integrations: Integrates with various APIs such as Strava, Spotify, Weather, Hacker News, and Stocks to provide relevant data.

Installation:

  1. Fork the repo and clone it down to your local machine.
  2. Create a new file named .env.local in the root directory of the project.
  3. Populate the following keys in the .env.local file.
    • [List of keys]
  4. Start the app by running the appropriate command.

Summary:

The Starter Tab app is a convenient dashboard that opens up on every new tab, providing users with a centralized location for all their desired information. It is built using NextJS and ChakraUI and utilizes local storage to give users ownership and control over their data. The app integrates with various APIs to provide data such as swim/run information, music controls, weather data, top ask posts, and stock ticker information. Users can also customize the dashboard by adding new tiles and using Recoil for persistent storage.

nextjs
Next.js

Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern 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

chakra-ui
Chakra UI

Chakra UI is a popular open-source React component library that provides a set of accessible and customizable UI components to help developers create modern web applications.

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.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

framer-motion
Framer Motion

Alpine.js is a lightweight JavaScript framework that simplifies the process of creating dynamic, reactive user interfaces on the web. It uses a declarative syntax that offers a higher level of abstraction compared to vanilla JavaScript, while being more performant and easier to use than jQuery.

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.