Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/omarramoun/swenson-he

Event Building Inc. web application that allows the user to select the task they want. All tasks are categorized under different categories like (Staff, Food, Catering ..etc). As such, the user selects a category and should be able to see all the items under this category.
https://github.com/omarramoun/swenson-he

css-modules framer-motion next redux-toolkit

Last synced: 18 days ago
JSON representation

Event Building Inc. web application that allows the user to select the task they want. All tasks are categorized under different categories like (Staff, Food, Catering ..etc). As such, the user selects a category and should be able to see all the items under this category.

Awesome Lists containing this project

README 

        
[![](https://img.shields.io/static/v1?label=BY&message=RAMOUN&color=birghtgreen)](https://ramoun.me)



![React](https://img.shields.io/badge/-React-1f1f1f?logo=react&logoColor=61DAFB&style=for-the-badge)

![Redux](https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge&logo=redux&logoColor=white)

![Next](https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white)



# Swenson He



> A sample screen from the Event Building Inc. web application that allows the user to select the task they want. All tasks are categorized under different categories like (Staff, Food, Catering ..etc). As such, the user selects a category and should be able to see all the items under this category. Each item in the category may be included in multiple categories, and other items will only be included in one category.



## A Screenshot of the Homepage



![screenshot](screenshots/screenshot.png)



## Collective Screenshots of the Mobile Version





  

  

  

  




## A Demo for the App



- [Demo](https://swensonhe.omarramoun.com/)



## Outline of Building Process



0. Prepare Project Structuree, Dependecy Management, Build System, Linting System, and Application Configs.

1. Build a site map

2. UI Breakdown to components (core components, navigation, layouts, pages)

3. Build components library (core building blocks of the app - under `src/components`)

4. Build a styling system using `css-modules` (including theme and global styles - under `src/styles`)

5. Add styling to core components

6. Build layout components (responsible for common layouts between pages - under `src/layouts`)

7. Build pages of the app (starting with the home page - under `src/screens`)

8. Build hooks and utility functions (under `src/hooks` and `src/utils`)

9. Build data fetching patterns (using `swr` - under `src/hooks`)

10. Add global state (using `Redux Toolkit` - under `src/state`)

11. Add animations (using `Framer Motion`)

12. [Coming Soon] Unit Tests and Mocks.

13. [Coming Soon] Performance Optimization

14. [Coming Soon] Add Security Layers



## Built With



1. **Typescript**

2. **Next.js**

3. **CSS-Modules**

4. **Redux Toolkit**

5. **Framer Motion**



## How to run Locally



```sh

$ git clone https://github.com/OmarRamoun/swenson-he.git



$ yarn install



$ yarn dev

```



## Author



👤 **Omar Ramoun**



- **GitHub**: [![@omarramoun](https://img.shields.io/github/followers/omarramoun?label=OmarRamoun&style=social)](https://github.com/omarramoun)

- **Twitter**: [![@omarramoun](https://img.shields.io/twitter/follow/omarramoun?label=OmarRamoun&style=social)](https://twitter.com/omarramoun)

- **LinkdIn**: [![@omarramoun](https://img.shields.io/github/followers/omarramoun?label=OmarRamoun&logo=linkedin&style=social)](https://www.linkedin.com/in/omarramoun/)



## 🤝 Contributing



Contributions, issues, and feature requests are welcome!



Feel free to check the [issues page](../../issues).



## Show your support



Give a ⭐️ if you like this project!