https://github.com/kazvee/bestie-squad
🐰 Redux application that enables users to create and manage a list of their best friends! ✨LIVE DEMO✨
https://github.com/kazvee/bestie-squad
bootstrap css css-flexbox react reactjs redux redux-connect
Last synced: 3 months ago
JSON representation
🐰 Redux application that enables users to create and manage a list of their best friends! ✨LIVE DEMO✨
- Host: GitHub
- URL: https://github.com/kazvee/bestie-squad
- Owner: kazvee
- Created: 2024-03-13T20:29:41.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2026-03-01T21:11:27.000Z (4 months ago)
- Last Synced: 2026-03-01T22:38:56.277Z (4 months ago)
- Topics: bootstrap, css, css-flexbox, react, reactjs, redux, redux-connect
- Language: JavaScript
- Homepage: https://kazvee.github.io/bestie-squad/
- Size: 3.04 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Bestie Squad 😻
## Description
Bestie Squad is a Redux application that enables users to create and manage their squad of besties!
## Final Product
### Live Demo
A demo can be viewed ✨[HERE](https://kazvee.github.io/bestie-squad/)✨
### Demo Video
https://github.com/kazvee/bestie-squad/assets/109990289/75cb6ab4-7d0a-48d3-a62d-4c9f7fb345d1
### Screenshot
## Purpose
This learning project explores key Redux concepts such as Reducers, Actions, and the Store structure.
**Store:**
A centralized data object in the application that holds the entire state of the application. It serves as a single source of truth and makes the state accessible to all components within the application.
**Reducers:**
Functions responsible for updating the store. They specify how the application's state should change in response to different actions dispatched within the application. Each reducer takes the current state and an action as input and returns a new state based on the action type.
**Actions:**
Payloads of information that send data from the application to the store. These JavaScript objects contain a type field that specifies the type of action being performed. Action creators generate these action objects, which in turn trigger state changes in the store.
## Features
- Character Management: Add characters to your Bestie Squad and remove them as needed.
- Redux Integration: Experience Redux in action with reducers, actions, and the Redux store.
- Dynamic UI: The user interface updates in real-time as Besties are added or removed from the Squad.
## Installation
- Fork this repository to your own GitHub account.
- Clone your fork onto your local device.
- Install all dependencies using the `npm i` (or `npm install`) command.
- Start the web server using the `npm start` command.
- Navigate to [http://localhost:3000](http://localhost:3000/) in your browser.
- Use the ➕ and ❌ buttons to build your Squad! 🐱🐶🐸
## Thanks and Acknowledgements
- [Favicon](https://www.favicon.cc/?action=icon&file_id=996246) by [unsureamen](https://www.favicon.cc/?action=icon_list&user_id=673951).
- [Background image](https://www.freepik.com/free-vector/gradient-pastel-sky-background_13326145.htm) by [Freepik](https://www.freepik.com).
- [Heart](https://icons8.com/icon/81747/heart) & [Add](https://icons8.com/icon/80705/add) & [Squad](https://icons8.com/icon/5mPDN05hVihb/sylvanian-families) icons by [Icons8](https://icons8.com/).
- [Sanrio](https://www.sanrio.com/) owns all rights to the characters referenced. 🩷