This is the repository for the AthletiFi platform. AthletiFi is a sports technology company focused on transforming youth soccer development and analytics. To that aim we have created a comprehensive platform that offers in-depth analytics and valuable features tailored to the needs of the youth soccer community.
The AthletiFi Dashboard is built using the following architecture:
The frontend communicates with the backend API endpoints to fetch and update data from the PostgreSQL database. AWS Amplify and Cognito handle user authentication and secure access to protected routes and resources. Strapi is used as the headless CMS for managing content.
The AthletiFi project utilizes the following key technologies:
Clone the repository and navigate to the project directory.
Install dependencies:
yarn installRun the development server:
yarn devStrapi is a next-gen headless CMS that allows for content-rich experiences.
Create a new Strapi app:
yarn create strapi-app my-project --quickstartRun the development server:
yarn run developmentTo set up AWS Amplify for the AthletiFi project, follow these steps:
Install the AWS Amplify CLI globally:
yarn global add @aws-amplify/cliConfigure Amplify by running the following command:
amplify configureThis will open the AWS Management Console in your web browser.
If prompted, click on "Open AWS Console" and sign in to your AWS account. If you don't have an account, you can create a new one.
In the Amplify CLI, press Enter to continue.
Specify the AWS Region for the Amplify project (e.g., us-east-2).
Provide the access key ID and secret access key for your AWS IAM user. These credentials can be found in the provided CSV file. Be careful not to share or expose these sensitive credentials.
Choose a profile name for the Amplify configuration (e.g., default).
After the configuration is complete, run the following command to pull the existing Amplify project:
amplify pullWhen prompted, select the following options:
defaultathletifi-websitejavascriptreactsrc directory path.nextyarn buildyarn startAfter the Amplify project is pulled successfully, you can start the development server using:
yarn devIf you encounter any issues during the build process, make sure to run yarn install to install any missing dependencies.
Note: The amplify serve command can be used to start the application using the Amplify server, but it requires a production build to be available in the .next directory. If you want to use amplify serve, make sure to run yarn build first.
For more information on AWS Amplify and its setup process, refer to the official Amplify documentation: AWS Amplify Docs
For maintaining consistent code quality and formatting, we use eslint-config-next along with prettier for code formatting. In order for this setup to work seamlessly in VS Code, some additional setup is required.
Assuming you have already run yarn install which installs all the dependencies listed in package.json, including ESLint and Prettier configurations, follow these steps to configure your VS Code:
Please install the following extensions in VS Code:
dbaeumer.vscode-eslint)esbenp.prettier-vscode)To automatically format and lint your code on save, add the following settings to your settings.json file in VS Code:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"editor.formatOnSave": true,
"[javascript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[javascriptreact]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[typescript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[typescriptreact]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
}
}The project follows a standard Next.js file structure:
The AthletiFi project is organized into various components based on features and pages. Each component serves a specific purpose and is responsible for rendering a part of the user interface or handling specific functionality. Detailed descriptions of each component can be found in the Component Descriptions section.
The project includes several API routes that handle requests and communicate with the backend services. These routes are defined in the /app/api directory and include endpoints for user management, player dashboards, news articles, and more. Detailed descriptions of each API route can be found in the API Routes section.
The project includes various utility functions that provide helper functionalities and abstractions for common tasks. These functions are organized in the /src/utils directory and cover areas such as data transformation, API requests, authentication, and more. Detailed descriptions of each utility function can be found in the Utility Functions section.
The project uses Jotai for global state management. Jotai is a primitive and flexible state management library for React that allows you to define global state atoms and access them from any component. The state atoms and custom hooks are defined in the /src/states directory.
The project uses Tailwind CSS for styling the user interface. Tailwind CSS provides a set of utility classes that can be composed to quickly build custom designs. The configuration for Tailwind CSS can be found in the tailwind.config.js file. Custom CSS styles are defined in the /src/styles directory.
The AthletiFi Dashboard is deployed using AWS Amplify. The deployment configuration is defined in the amplify.yml file. AWS Amplify provides a seamless way to deploy and manage the application, including provisioning the necessary AWS resources and handling continuous deployment.
To ensure code quality and maintainability, the project follows various best practices: