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

https://github.com/rysth/strapi-updateec

UpdateEC is a simple eCommerce website for a technologic unipersonal company, where we can know a more about them and also take a look at the products that they offer to the customers, search them by name and by category. Built with React, Redux Toolkit, Strapi, Tailwind CSS.
https://github.com/rysth/strapi-updateec

Last synced: over 1 year ago
JSON representation

UpdateEC is a simple eCommerce website for a technologic unipersonal company, where we can know a more about them and also take a look at the products that they offer to the customers, search them by name and by category. Built with React, Redux Toolkit, Strapi, Tailwind CSS.

Awesome Lists containing this project

README

          

# John Palacios - RysthCraft


logo

# 📗 Table of Contents

- [📖 About the Project](#about-project)
- [🛠 Built With](#built-with)
- [Tech Stack](#tech-stack)
- [Key Features](#key-features)
- [🚀 Live Demo](#live-demo)
- [💻 Getting Started](#getting-started)
- [Setup](#setup)
- [Commands](#commands)
- [Test](#test)
- [👥 Authors](#authors)
- [🔭 Future Features](#future-features)
- [🤝 Contributing](#contributing)
- [⭐️ Show your support](#support)
- [🙏 Acknowledgements](#acknowledgements)
- [📝 License](#license)

# 📖 UpdateEC

- **UpdateEC** is a simple eCommerce website for a technologic unipersonal company, where we can know a more about them and also take a look at the products that they offer to the customers, search them by name and by category. Built with React, Redux Toolkit, Strapi, Tailwind CSS.

## 🛠 Built With

### Tech Stack

FRONT END

- [HTML](https://www.w3schools.com/html/)
- [CSS](https://www.w3schools.com/css/)
- [JavaScript](https://www.w3schools.com/js/)
- [React](https://react.dev/)
- [TailwindCSS](https://tailwindcss.com/)
- [Framer Motion](https://www.framer.com/motion/)
- [React Multi Carousel](https://www.npmjs.com/package/react-multi-carousel)
- [React Notifications](https://www.npmjs.com/package/react-notifications)
- [FormSpree](https://formspr.ee/react-help)

- BACKEND

- [Headless CMS | Strapi](https://strapi.io/)
- [PaaS | Koyeb](https://www.koyeb.com/)
- [PaaS | Fl0](https://fl0.com/)

### Key Features

- 🔰 Beautiful Landing Page using TailwindCSS.
- 🔰 Good-looking Animations using Framer Motion Library and AnimateCSS.
- 🔰 Products Management using Redux Toolkit.
- 🔰 Search and filter Products by Name or Category.
- 🔰 Use Strapi Public's API to manage the Products information.

(back to top)

### 🚀 Live Demo

- [Live Demo](https://react-updateec.onrender.com/)

## 💻 Getting Started

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

### Setup

Clone this repository to your desired folder:

```
git clone https://github.com/Rysth/REACT-UpdateEC.git
cd REACT-UpdateEC
code . (To open VS Code Editor)
```

Then, you will change everything you want!

### Frontend Commands

- ✔️ _npm start_:
Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.

- ✔️ _npm test_:
Launches the test runner in the interactive watch mode. See the section about running tests for more information.

- ✔️ _npm run build_:
Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

### Backend Commands

- ✔️ \_npm run develop:
Start your Strapi application with autoReload enabled. [Learn more](https://docs.strapi.io/dev-docs/cli#strapi-develop)

- ✔️ _npm run start_:
Start your Strapi application with autoReload disabled. [Learn more](https://docs.strapi.io/dev-docs/cli#strapi-start)

- ✔️ _npm run build_:
Build your admin panel. [Learn more](https://docs.strapi.io/dev-docs/cli#strapi-build)

## ⚙️ Deployment

Strapi gives you many possible deployment options for your project including [Strapi Cloud](https://cloud.strapi.io). Browse the [deployment section of the documentation](https://docs.strapi.io/dev-docs/deployment) to find the best solution for your use case.

### Linters

In order to follow the Linters you could check them using this:

- CSS Checker:

```
npx stylelint "**/*.{css,scss}" --fix
```

- ESLint Checker:

```
npx eslint "**/*.{js,jsx}" --fix
```

(back to top)

## 👥 Authors

👤 **John Palacios**

- GitHub: [@rysthcraft](https://github.com/Rysth)
- Linkedin: [@johnpalacios](https://www.linkedin.com/in/john-rysthcraft/)

(back to top)

## 🔭 Future Features

- [x] Migrate the Strapi/Postgres Database to Render.
- [x] Implement a better filter system for the Products Page.
- [x] Create a Details page to see a specific product information.
- [x] Create a Login/Sign Up page for users.

(back to top)

## 🤝 Contributing

Contributions, issues, and feature requests are welcome!

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

(back to top)

## ⭐️ Show your support

If you like this project feel free to watch it and take some features that will enhance your project
as well.

(back to top)

## 🙏 Acknowledgments

I would like to thank the [Nait Creative](https://www.figma.com/@Naitcreative) for providing me with a landing page design to get inspiration for the design.

(back to top)

## 📝 License

This project is [MIT](./LICENSE.md) licensed.

(back to top)