Runner Pulse
Philip Stubbs
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.
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
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.
2. Go to the project directory.
3. Install dependencies.
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.
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.
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):
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.
Running Tests
This project uses vitest for unit tests. To run the unit tests for this project, run the following command in the root directory of this project.
To generate a test coverage report, run the following command:
Deployment
This app is deployed through the Vercel Platform. Deploys are set up to happen automatically when code is merged into the
main branch.Contributing
Contributions are welcome! Please open an issue or submit a pull request for any improvements or bug fixes.
Contact
Phil Stubbs - philipstubbs13@gmail.com
Issues and Requests
If you find an issue while using the application or have a request, log the issue or request here. These will be addressed in a future code update.
Like this project
Posted Sep 24, 2024
Runner Pulse is a comprehensive web application designed for passionate runners to track, analyze, and improve their performance.
Wistia Video Player
Beat the Odds
D3 Data Journalism
GitHub Release Monitor
