Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/enes9103/betalimited-e-commerce-platform-frontend-development


https://github.com/enes9103/betalimited-e-commerce-platform-frontend-development

Last synced: 9 days ago
JSON representation

Awesome Lists containing this project

README 

        
## About The Project



Project is an e-shopping application where users can search for products and view them by adding them to their cart in any quantity they want.



## Description



- The project consists of a single page.

- Products can be listed, searched and the desired product can be added to the cart in the desired quantity.

- Products added to the cart can be viewed and deleted in the cart section.

- Cart management is created as two structures in the code. API system and Local usage. (Storage)

- React.js and MUI were used in the project.

- Redux Toolkit was used in the project state management process.



(back to top)



## Project Skeleton



```

Beta-Limited (folder)

|

├── public

│    └── index.html

├── src

│    ├── assets

│    │     └── icons

│    │     └── images

│    │     └── index.js

│    ├── components

│    │     ├── common

│    │     └── layouts

│    ├── helpers

│    │     └── StorageHelper.js

│    ├── redux

│    │     ├── slices

│    │     ├── store.js

│    ├── styles

│    │     └── theme.js

│    ├── App.js

│    ├── index.js

├── package.json

├── package-lock-json

├── tsconfig.json

├── README.md

└──.env

```



(back to top)



## Getting Started



This is an example of how you may give instructions on setting up your project locally.

To get a local copy up and running follow these simple example steps.



### Prerequisites



This is an example of how to list things you need to use the software and how to install them.



- npm

  ```sh

  npm install npm@latest -g

  ```



### Installation



_Below is an example of how you can instruct your audience on installing and setting up your app. This template doesn't rely on any external dependencies or services._



1. Clone the repo

   ```sh

   git clone https://github.com/enes9103/movie_app_task_react_ts

   ```

2. Install NPM packages

   ```sh

   npm install

   ```

3. Create .env file in home directory.



   ```sh

   REACT_APP_BETA_LIMITED_API_URL



   ```



   ### Important Reminder!!!



   It is designed to be used by preparing an .env file for the project.

   The sample .env structure added to the project must be created and the Api added when the project is run.



6. The project is ready, you can start using it now.

   You can run:



   `npm start`



   Runs the app in the development mode.\

   Open [http://localhost:3000](http://localhost:3000) to view it in the browser.



(back to top)



## Project Development Process



- 1: Created using React.js library.



- 2: MUI was used as the css library in the project.



- 3: Redux Toolkit was used as the State Management library.



- 4: The application is designed with a responsive structure that can work smoothly on mobile and desktop platforms.



- 6: Application shared on Github. During project preparation, development phases were committed and pushed to repo.



- 8: Added README.md file after project completion.



- 9: Used npm package manager during application development. Used Webpack for pre-deployment packaging.



- 10: The project was finally deployed using the Netlify service.



(back to top)



## Contributing



Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.



If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".

Don't forget to give the project a star! Thanks again!



1. Fork the Project

2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)

3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)

4. Push to the Branch (`git push origin feature/AmazingFeature`)

5. Open a Pull Request



(back to top)



## Notes



- You can add additional functionalities to your app.



## License



Distributed under the MIT License. See `LICENSE.txt` for more information.



(back to top)