https://github.com/adambornrepo/ila-case-study
This project is a frontend case study web application developed for the International Labour Association (ILA). It demonstrates the implementation of various modern web development techniques using ReactJS.
https://github.com/adambornrepo/ila-case-study
auth0 bootstrap reactjs redux-toolkit sass tanstack-table
Last synced: about 1 month ago
JSON representation
This project is a frontend case study web application developed for the International Labour Association (ILA). It demonstrates the implementation of various modern web development techniques using ReactJS.
- Host: GitHub
- URL: https://github.com/adambornrepo/ila-case-study
- Owner: adambornrepo
- License: mit
- Created: 2024-08-22T13:41:48.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2024-09-05T16:44:01.000Z (8 months ago)
- Last Synced: 2025-02-01T17:44:59.363Z (3 months ago)
- Topics: auth0, bootstrap, reactjs, redux-toolkit, sass, tanstack-table
- Language: JavaScript
- Homepage: https://ila-case-study.vercel.app
- Size: 2.15 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ILA - Case Study
This project is a frontend case study web application developed for the International Labour Association (ILA). It demonstrates the implementation of various modern web development techniques using ReactJS.
## Screen Preview
- [Landing Page](./public/images/screen/home.png)
- [Custom Login Page](./public/images/screen/custom-login.png)
- [Auth0 Login Page](./public/images/screen/auth0-login.png)
- [Registration Page](./public/images/screen/registration.png)
- [Dashboard](./public/images/screen/dashboard.png)
- [Product Details Page](./public/images/screen/product-details.png)
## Live Website
The live application is available at: [ILA Case Study](https://ilacase.vercel.app/)
## Test User
For authentication testing, you can use the following credentials:
- **Email:** `[email protected]`
- **Username:** `testuser`
- **Password:** `Test_123`
Use these credentials to explore all the features and functionalities of the application.
Alternatively, you can create a new account to test the registration process and experience the application as a new user.
## List of Contents
1. [Features](#features)
2. [Installation and Usage](#installation-and-usage)
2. [Environment Variables](#environment-variables)
3. [Dependencies](#dependencies)
4. [Docker Setup](#docker-setup)
5. [License](#license)
6. [Author](#author)
## Features
- **Single Page Application (SPA)**: The application is built as a SPA using ReactJS for seamless user experience.
- **Pages**: Includes Home Page, Login, Registration, Dashboard, Product Details, and custom error pages (404 & 500).
- **Mock Data & CRUD Operations**: Utilizes the [Fake Store API](https://fakestoreapi.com/) for mock data and CRUD operations.
- **Styling**: Designed with Bootstrap and SASS. Global styles are managed using a `_variables.scss` file.
- **Authentication**: Integrated with [Auth0](https://auth0.com/) for user authentication. A custom login page is provided, and the production version supports Auth0 Universal Login.
- **Username/Email Login**: Users can log in using either their username or email address.
- **State Management**: Centralized state management is handled using Redux Toolkit.
- **Data Presentation**: The Dashboard page features a responsive product table built with the latest version of [React Table](https://tanstack.com/). Multiple table views are available for a user-friendly experience.
- **Responsive Design**: The application is fully responsive and optimized for all device types.
- **API & Validation**: Axios is used for API requests, and Yup is used for form validation.
- **User Feedback**: User actions are accompanied by feedback messages displayed using [React Hot Toast](https://react-hot-toast.com/).
- **Routing**: Navigation and routing are managed with [React Router Dom](https://reactrouter.com/en/main).
- **Docker Support**: Dockerfile and docker-compose.yml are provided for containerization.
- **Deployment**: The application is deployed on [Vercel](https://vercel.com/).
## Installation and Usage
To set up the project locally, use the following steps:
### Using npm
```bash
npm install
```
```bash
npm start
```
## Environment Variables
```.env
REACT_APP_STORAGE_ENCRYPTION_KEY=
REACT_APP_RECAPTCHA_SECRET_KEY=
REACT_APP_MAX_LOGIN_FAILURE=
REACT_APP_BASE_URL=
REACT_APP_AUTH0_DOMAIN=
REACT_APP_AUTH0_CLIENT_ID=
```
## Dependencies
The application relies on the following key dependencies:
- `@auth0/auth0-react`
- `@reduxjs/toolkit`
- `@tanstack/react-table`
- `axios`
- `bootstrap`
- `formik`
- `react`
- `react-bootstrap`
- `react-icons`
- `react-redux`
- `react-router-dom`
- `sass`
- `yup`
## Docker Setup
This application can be easily containerized and deployed using Docker. Below are the steps to build and run the application using Docker, either by directly using the `Dockerfile` or with the help of `docker-compose`.
### Method 1: Building and Running with Dockerfile
You can build a Docker image and run a container directly using the provided `Dockerfile`.
#### Step 1: Build the Docker Image
Run the following command in your terminal to build the Docker image:
```bash
docker build -t ila-case-app .
```
This command creates a Docker image named ila-case-app using the Dockerfile in the current directory.
#### Step 2: Run the Docker Container
After the image is built, you can run it as a container with the following command:
```bash
docker run -p 3000:3000 ila-case-app
```
This command runs the ila-case-app container, mapping port 3000 of the host machine to port 3000 of the container. You can access the application at http://localhost:3000.
### Method 2: Using Docker Compose
Use the following command to build and run the application:
```bash
docker-compose up
```
This command will build the Docker image and start the container according to the configuration in docker-compose.yml.
Once the setup is complete, the application will be accessible at http://localhost:3000.
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
## Author
Developed by Dogan MERDEN. For any inquiries, please contact me at [[email protected]](mailto:[email protected]).
- Github: [adambornrepo](https://github.com/adambornrepo)
- Website: [Portfolio](https://doganmerden.vercel.app/)