Runner Pulse

Backend Engineer

Frontend Engineer

Fullstack Engineer

Next.js

React

TypeScript

Runner Pulse - Advanced Running Analytics App

Project Link: https://runner-pulse.vercel.app/

GitHub Repository: https://github.com/philipstubbs13/runner-pulse

Runner Pulse is a comprehensive web application designed for passionate runners to track, analyze, and improve their performance. Built with modern web technologies, this app offers a sleek, responsive interface and powerful analytics tools.

Live · Storybook · Report Issue

Screenshots

Charts

Race Distribution By City Chart

Performance Over Time Chart

Average Time By Distance Chart

Login

Personal Results

Upcoming Races

Race Details

Photo Gallery

Stats

Manage Race Distances

Manage Race Locations

Acknowledgments

Storybook for simplifying UI development, testing, and documentation.

Next.js for the robust and flexible React framework.

About the Project

This project showcases the ability to deliver a feature-rich, user-centric application that caters to the specific needs of the running community while leveraging cutting-edge web development technologies.

Built With

Vitest (unit testing framework)

TanStack Table

Key Features

Personal race result tracking and anaylsis

Interactive performance charts and statistics

Upcoming race discovery and management

Photo gallery for capturing running memories

Customizable user profiles and settings

Technical Highlights

Developed using React and Next.js for a fast, server-side rendered experience.

Responsive design implemented with Tailwind CSS for a seamless mobile and desktop experience.

Interactive charts created using Recharts library for data visualization.

State management and routing handled efficiently with React hooks and Next.js App Router.

Accessible UI components built with shadcn/ui library.

Module architecture for easy maintenance and scalability.

My Expertise

The Runner Pulse app demonstrates expertise in:

Building complex, data-driven React applications.

Creating intuitive and responsive user interfaces.

Implementing advanced data visualization techniques.

Developing performant and scalable web applications.

Getting Started

Follow these instructions to set up and run the project on your local machine.

Clone the project from GitHub.

  git clone https://github.com/philipstubbs13/runner-pulse.git

2. Go to the project directory.

  cd runner-pulse

3. Install dependencies.

  npm install

4. Set up environment variables.

a. In the root of the project, create a .env file.

b. Copy the environment variables from .env.example into the .env file.

5. Start the Next.js development server.

npm run dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.

Learn Next.js - an interactive Next.js tutorial.

Running Storybook

This project uses Storybook. Storybook is a frontend development tool for developing, testing, and documenting UI components in complete isolation from the applications in which they are used. In this Storybook, you will find all of the UI components used throughout the app and documentation on how to use/implement these components.

To run Storybook for this project, run the following command in the root directory of this project.

  npm run storybook

The Storybook for this project is deployed to the following URL: https://66e7fab26977c0410ed6ca2b-ymdpnwigph.chromatic.com

Chromatic

For this project, Storybook is deployed via Chromatic. Chromatic catalogs the component library across commits and branches. If you plan to contribute to this project, it can help with reviewing the UI components, see past versions of the component, and get feedback on any work in progress.

The Chromatic library is available at the following URL (mostly valuable only if you plan to contribute to this project):

https://www.chromatic.com/library?appId=66e7fab26977c0410ed6ca2b

Currently, When you push code to the main branch, a GitHub action is set up for this repository to automatically kick off a build in Chromatic. The Chromatic GitHub action is located in the .github/workflows directory of the repository. The CHROMATIC_PROJECT_TOKEN must be configured as a repository secret in the settings of this repository for this action to work.

When this action is run, a build will be kicked off. After the build is complete, you can review the component changes associated with that build and either accept or deny those changes from the Chromatic library.