Welcome to the Strava Replica project in React! This project is a recreation of the Strava web application, aiming to provide a similar user experience and functionality to the original platform. Below, you will find an overview of the project's goals, iterations, and how to get started with development.
The Strava Replica project is a part of my final year in the Level 8 BSc (Hons) Creative Media and Design program at the Technology University of the Shannon: Midland Midwest (TUS). It's a comprehensive project that involves coding, design, and a user-centric approach. The project is divided into iterations, each building upon the previous one to ultimately recreate the core features of the Strava platform.
Iteration 1: Basic UI Setup, Header, Footer, Routes, and Strava API Integration (Minimum Viable Product)
- Set up the basic UI structure, including a header and footer.
- Create a landing page that displays essential information about the user (name, profile picture) retrieved from the Strava API.
- Implement routing to enable navigation within the application.
- Integrate the Strava API to fetch and display the user's basic activity data (e.g., recent activities).
- Allow users to create new activities, specifying type, duration, and date.
- Implement the functionality to delete activities.
- Ensure seamless integration with the Strava API for activity data synchronization.
- Design and implement a dedicated page to display detailed activity information.
- Integrate analysis features, such as distance, speed, and elevation data for each activity.
- Ensure a smooth transition from activity listing to detailed view.
- Integrate a heart rate monitor API to collect real-time heart rate data during activities.
- Display the heart rate data appropriately on the activity detail page.
- Ensure compatibility and accuracy with various heart rate monitor devices.
- Implement a friend/follower system, allowing users to connect with each other.
- Enable users to share their activities and interact by liking and commenting on them.
- Implement real-time notifications for social interactions within the platform.
- Enhance user authentication with features like email verification and password reset.
- Implement social login options, such as Google and Facebook authentication.
- Enhance the user profile with customizable avatars, activity history, and user statistics.
- Conduct a series of final iterations to refine and optimize the application.
- Focus on Accessibility, performance, usability, and addressing any feedback received during the development process.
To start working on this project, follow these steps:
-
Clone the Repository: Clone this GitHub repository to your local development environment.
git clone https://github.com/yourusername/strava-app.git
-
Set Up the Environment: Make sure you have Node.js and npm installed on your system. If not, you can download them from https://nodejs.org/.
-
Install Dependencies: Navigate to the project directory and install the project dependencies.
cd strava-app npm install -
Start the Development Server: Launch the development server to run the application locally.
npm start
-
Access the Application: Open your web browser and go to http://localhost:3000 to view and interact with the Strava Replica application.
If you'd like to contribute to this project, please follow these guidelines:
- Create a new branch for each feature or bug fix.
- Write clear and concise commit messages.
- Submit a pull request for review and potential inclusion into the main branch.
If you encounter any issues or have feedback on the project, please feel free to create an issue. Your input is valuable in making this project better!
Thank you for your interest and contribution to the Strava Replica project. Let's work together to create an amazing application for sports and fitness enthusiasts!