{"id":23058802,"url":"https://github.com/mzaintariqdev/thesportapp","last_synced_at":"2026-04-16T10:35:56.833Z","repository":{"id":241513780,"uuid":"492516952","full_name":"mzaintariqdev/thesportapp","owner":"mzaintariqdev","description":null,"archived":false,"fork":false,"pushed_at":"2024-05-28T08:26:53.000Z","size":10020,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-08T20:14:31.043Z","etag":null,"topics":["antdesign","bigcalendar","chartjs-2","reactbigcalendar","reactchartjs","reactjs","redux","redux-saga","sass","sass-mixins"],"latest_commit_sha":null,"homepage":"https://thesportapp.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mzaintariqdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-15T14:52:15.000Z","updated_at":"2024-05-28T08:26:58.000Z","dependencies_parsed_at":"2024-05-28T21:15:37.792Z","dependency_job_id":null,"html_url":"https://github.com/mzaintariqdev/thesportapp","commit_stats":null,"previous_names":["mzaintariqdev/thesportapp"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzaintariqdev%2Fthesportapp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzaintariqdev%2Fthesportapp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzaintariqdev%2Fthesportapp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzaintariqdev%2Fthesportapp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mzaintariqdev","download_url":"https://codeload.github.com/mzaintariqdev/thesportapp/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246944930,"owners_count":20858864,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["antdesign","bigcalendar","chartjs-2","reactbigcalendar","reactchartjs","reactjs","redux","redux-saga","sass","sass-mixins"],"created_at":"2024-12-16T02:17:40.615Z","updated_at":"2026-04-16T10:35:51.802Z","avatar_url":"https://github.com/mzaintariqdev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# How to run the app locally\n\n## Description\n\nThis project focuses on creating a user-friendly UI/UX using Reactjs and Ant Design for reusable components and using React big Calendar. It includes role-based authentication with mock APIs and state management implemented via Redux saga so no backend is attached only a FE is included in this project the Concept of this project was to Create FE for a Sports  Club Booking system for there Clients . The application is deployed and accessible at the following link:\n\n[Access the Application](https://thesportapp.netlify.app/)\n\n## Credentials for the App\n\n### Admin Login\n- **username:** admin\n- **Password:** admin123\n\n### club Login\n- **Email:** club\n- **Password:** club123\n\n## Requirements\n\n- node ^v16.16.0\n- npm ^8.11.0\n\n## Installed Dependencies\n\n- Immer\n- Axios\n- Redux (with sagas)\n- React icons\n- React Router\n- Classnames\n- MomentJS\n- Reselect\n- Sass\n\n## Documentation\n- [React](https://reactjs.org/docs/getting-started.html)\n- [Immer](https://immerjs.github.io/immer/)\n- [Redux](https://redux.js.org/api/api-reference)\n- [Sass](https://sass-lang.com/documentation/)\n- [React Icons](https://react-icons.github.io/react-icons/)\n\n## Installation\n\nTo run it locally you just need to clone the project after that do the follwoing steps:\n\n1. in your terminal go to root directory of the project run:\n```bash\n$ npm install\n```\n## Running App\n\n\u0026nbsp; \u0026nbsp; After installation step is complete, you're ready to start the project!\n\n```bash\n$ npm start\n```\nAfter that you can use follwoing login for the app which is using mock api:\n```bash\nusername: admin\npassword: admin123\n```\n\n## Project Structure\n\n\u0026nbsp; \u0026nbsp; This project uses Fractal project structure (also known as self-contained apps, recursive route hierarchy).\nInstead of building applications using a flat directory structures, where everything is separated into folders such\nas containers, components etc. which is not scalable, this structure allows the application to construct its own\narchitecture from the beginning. Rather than grouping functionality by file type, this structure groups it by feature.\nThe structure below represents the fractal structure and how it will be used for this project.\n\n\n```\n.\n├── assets\n|   ├── icons\n|   ├── images\n├── src\n|   ├── components\n|   |   ├── components\n|   |   ├── App\n|   |   |   └── index.js\n|   |   |   └── App.jsx\n|   |   |   └── Container.js (can be added if needed)\n|   |   └── Component\n|   |       └── View.jsx\n|   |       └── Container.js\n|   |       └── index.js\n|   |       └── Component.scss\n|   |       └── components\n|   |           └── ...\n|   ├── redux\n|   |   ├── reducers\n|   |   |   └── index.js\n|   |   |   └── componentReducer\n|   |   |       └── index.js\n|   |   ├── actions\n|   |   |   └── componentActions\n|   |   |       └── index.js\n|   |   ├── sagas\n|   |   |   └── index.js\n|   |   |   └── componentSagas\n|   |   |       └── index.js\n|   |   ├── selectors\n|   |   |   └── componentSelectors\n|   |   |       └── index.js\n|   |   ├── store\n|   |   |   └── index.js\n|   |   ├── utils\n|   ├── services\n|   |   └── apiService.js\n|   |   └── componentServices\n|   |       └── index.js\n|   ├── routes\n|   |   └── route.js\n|   |   \n|   |    \n|   ├── styles\n|   |   └── App.scss\n|   |   └── index.scss\n|   |   └── variables.scss\n|   |   └── ...\n|   ├── types\n|   |   └── index.js\n|   |   └── component\n|   |   └── index.js\n|   |   └── ComponentProps.js\n|   |   └── ...\n|   └── utils\n|       └── defaultStates\n|       \n|       \n|       \n└── index.jsx\n```\n\n### Components\n\u0026nbsp; \u0026nbsp; Components folder contains all defined components separated into respective folders. Inside the root\n`Components` folder is also another `components` folder, which contains all reusable components, such as buttons, inputs,\npopups, notifications, etc. Each component should have the following files:\n1. **View.jsx** - JS file containing JSX elements.\n2. **Container.js** - JS file containing connection to redux store.\n3. **index.js** - JS file exporting View and Container wrapped.\n4. **styles.scss** - SCSS file containing styles for the component.\n5. **components** - (optional) folder containing Component's components in the same structure as described above\n\n**NOTE**: *if the component does not need data from redux store, such as state or actions, Container file does not need to be created.\nInstead, index file exports only the View.*\n\n### Redux\n\u0026nbsp; \u0026nbsp; Redux folder contains everything required for redux store:\n1. **store** *(index.js)* - redux configuration\n2. **reducers** - folder containing index.js (entry point for all reducers) and respective folders with reducers for each component.\n3. **sagas** - folder containing index.js (entry point for all sagas) and respective folders with sagas for each component.\n4. **selectors** - folder containing respective folders with selectors for each component.\n5. **actions** - folder containing respective folders with actions for each component.\n6. **utils** - folder containing all helpers, constants etc. that are needed for redux.\n\n### Routes\n\u0026nbsp; \u0026nbsp; Routes folder contains the following: \n1. **route.js** - entry point for all route declarations\n\n### Services\n\u0026nbsp; \u0026nbsp; Services folder contains the following:\n1. **apiService.js** - service provider\n2. **`component`Service.js** - file containing api definitions for component. Each component (api route) should have separate service file.\n3. **utils** - folder containing API routes definitions, and helper function for handling API calls\n\n### Deployment \nFor Temporay deployment getting help of netlify for that we can run following command to create a build:\n\n```bash\n$ npm run build\n```\nAfter that simply use the build folder to upload that on netlify after that you will get a hosted link\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmzaintariqdev%2Fthesportapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmzaintariqdev%2Fthesportapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmzaintariqdev%2Fthesportapp/lists"}