Project Briefing | Technical Requirements | File Structure, Data Management and Quality Control | Live Demo Link | Installing | Built With | Author
--This is the front-end of a full stack project, to see the Rails API backend, check here
This project is the Final Capstone Project required for completing the Microverse Technical Curriculum Microverse.
The capstone project is performed under time restrictions and presents business-like specifications to be followed. The goal is to simulate as much as possible the real conditions of business situations and practice professional execution.
The specifications of this project can be found in the Tracking App.
The original specification and design for the project followed those of Gregoire Vella's on Behance 'Bodytrack.it'. It was required to follow the design and we are supposed to change the theme of the project. I chose to make fully functional running app to challenge myself and for learning purposes.
The provided requirements stated that we must build the app following these guidelines:
- Connects to the back-end API to send and receive domain data
- With routes for each of the screens, so the user can easily go back and forward
- Using redux to store info used across the app, like the username
This project is a Full Stack Project, built in two parts. This repository contains the front-end, and this link will lead you to the repository where the backend (a Rails API) is.
The structure used in this project was inspired on the View-State Split Structure because it fulfills the needs of the project based on its size and complexity.
The state of the entire app was managed using Redux Store.
The data is hadled by the Rails API built exclusively for this project, and hosted on Heroku. Check it here.
This project was built following the rules of ESLint and Stylelint.
If you want to check how the pages look already filled with data, login using the name "example".
- Javascript
- ReactJS with React Hooks
- Redux
- yarn
- SCSS Modules
- Tested with Jest, Enzyme & Cypress
You'll need a package manager to install the dependencies listed in package.json in order to make it work in your local machine. This project used YARN. The installation guide can be found Here (for Ubuntu).
To setup the project, run the following commands on terminal:
$ cd <folder> (the place you want to have the files installed)
$ git clone https://github.com/ldelbel/track.it.git
$ cd track.it
$ yarn install
This will install the dependencies in your local machine. This process can take a few minutes.
After installing the dependencies you can start the application running the code below
$ yarn start
If your default browser doesn't open automatically, visit http://localhost/3000.
Unit tests were made using Jest, along with a few tools:
- react-testing-library and enzyme for DOM tests
- react-test-renderer for snapshots
To run the tests, use the command below
$ yarn test
This is a project with the goal of learning and presenting the skills acquired along the React&Redux section of Microverse Curriculum. Because of that, the coverage goals were not very high. It was decided that for this purpose maintaining overall coverage around 50% is acceptable.
Cypress was used to make the integration tests for the main basic functionalities of the app.
To run the tests in your terminal and generate the video simulating the user navigation, run the following command:
$ yarn test:e2e
To watch the procedures of the test suites in Cypress interface, run the following command:
$ yarn test:e2e:dev
Contributions, issues and feature requests are welcome!
Feel free to check the issues page.
Give a ⭐️ if you like this project!
- Microverse: @microverse
- React: @react
- Gregoire Vella's on Behance 'Bodytrack.it': @bodytrack.it