A tablet web app for booking appointments to test drive super cars.
Home Page
Cars Page
Appointments Page
This Application is built as a front end app consuming a Ruby on Rails API separately deployed to Heroku. It uses Auth0 for Authentication and Authorization
This application consumes a couple of endpoints served by the API accessible online as the base Url;
- /users - (create user account)
- /appointments - (create appointment)
- /cars - (fetch all cars)
- /cars/:id - (fetch single car)
- /users/:id - (fetch user appointments)
- AuthO
- ReactJs
- Redux
- Netlify (For deployment)
- Jest
- CSS (Modules)
- HTML
- Webpack
- ES6 JavaScript.
For the full working application click here
| Dependency | Use |
|---|---|
| prop-types | Declare types for props passed into React components |
| react | React library |
| react-toastify | Display messages to the user |
| react-dom | React library for DOM rendering |
| react-redux | Connects React components to Redux |
| react-router-dom | React library for routing |
| redux | Library for unidirectional data flows |
| redux-thunk | Async redux library |
| auth0-js | Auth0 Authentication |
| react-hook-form | React library for form |
| Dependency | Use |
|---|---|
| babel-eslint | Lint modern JavaScript via ESLint |
| eslint | Lints JavaScript |
| eslint-plugin-react-hooks | Adds additional React-hooks-related rules to ESLint |
| eslint-plugin-import | Advanced linting of ES6 imports |
| eslint-plugin-react | Adds additional React-related rules to ESLint |
| fetch-mock | Mock fetch calls |
| jest | Automated testing framework |
| node-fetch | Make HTTP calls via fetch using Node - Used by fetch-mock |
| react-test-renderer | Render React components for testing |
| @testing-library | Test React components |
| redux-immutable-state-invariant | Warn when Redux state is mutated |
| redux-mock-store | Mock Redux store for testing |
| stylelint | Lints Css |
| stylelint-config-standard | Advanced linting configoration for css |
| stylelint-csstree-validator | Advanced linting validation for css |
| stylelint-scss | Adds additional SCSS-related rules to StyleLint |
To get a local copy up and running follow these simple example steps.
Clone this repository
- cd into the project directory
- run yarn install
- run yarn start
- Navigate to localhost:3000
👤 Somoye Ayotunde
- Github: @somoye123
- Twitter: @ayotunde_197
- LinkedIn: somoye-ayotunde
- Mail: somoye.ayotunde@gmail.com
Contributions, issues and feature requests are welcome!
Feel free to check the issues page.
Give a ⭐️ if you like this project!
- Microverse
- You can access all the design info (color, typography, layouts) in this link:
- Design
- Design idea by Murat Korkmaz on Behance