This is a pet project for the frontend of a crossfit application. The application has the following functionalities:
- A user can log in using Oauth2 and OpenID (Auth0 is being used as authentication and authorization server)
- A authorized user can see all the registered athletes
- A user can get information about the instructors and their specialties
- A user can get information about the existing classes
- A user can see information about his current profile
- An authorized user can see the schedule of the week:
- can see the available spots in the class
- can see other athletes registered in the class
- can register himself in the class
- can deregister himself from the class
This frontend makes calls to a crossfit backend that handles a database with all the data required. Make sure that you update the globalConsts.js file in the root directory. API_HOST and AUTH0_AUDIENCE variables should point to the backend service. The latter variable refers to authentication audience, meaning the resource server. The former is used for the api calls made to the crossfit backend.
- Achievements page:
- The user will be able to add new achievements and retrieve his data from the backend
- The user can compare to other athletes achievements
- Currently we do not support new registrations
- bug: when going back to the previous year calendar gets messed up
- Add new classes instances
If you already have docker installed on your machine execute the following cmds:
// In the root folder
// You can build your own image using this command:
docker image build -t <docker_id>/<docker_repo>:crossfit-fronend .
// Run the container
docker container run -d --name crossfit-frontend -p 3000:3000 <docker_id>/<docker_repo>:crossfit-fronend
In order to have all the functionality needed for this frontend app you need to create a new account in Auth0. Then you need to create a new domain in order to get a clientId. You can configure your domain with a redirect uri. This is the URL that will get called once authentication is finsihed. For more information on how to setup your account follow the instructions in auth0 quick start guide.
Once you have created your application is time to create your API:
- On the Auth0 dashboard select APIs from the left menu
- Click on the create api button
- Give a name for your API (meaning backend) and the API identifier. If you are running on localhost then you should use http:localhost:port
- Once the API is created click on it and go to settings. Under RBAC Settings enable RBAC and Add permissions in the access token options. Both of them are needed in order to have specific permissions for certain resources.
- Next step is to add a permission. Go on the permissions tab of your API and add read:athletes as a scope. This scope is used in order to limit the amount of users that can read the athletes that are registered.
After the first time you login in the application you, can add permissions to your user account:
- Go to users & roles in the Auth0 dashboard
- Click on your user and then click on permissions
- There you can add the read:athletes scope
To run this frontend you need to create a .env file in the root directory. Then you need to define the auth0 domain and client id. You can fetch those from your auth0 account after you choose the application that you created in the previous step. After creating the .env file do not forget to restart your development server so that the new enviromental variables are loaded. Below you can see a sample of the .env file. The values are random so please make sure that you add your own values.
REACT_APP_AUTH0_DOMAIN=your-application.eu.auth0.com
REACT_APP_AUTH0_CLIENT_ID=I9McoPMQ4kxhKDUhlJ9NILvXNvBB6X58
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify