yegon-gk / group-b-project

Phase 2: Group B Project

Members:

1. Yegon (Scrum Master.)
2. Faith
3. Shadrack
4. Noah
5. Adrian
6. OmarFarouq

Repository link

https://github.com/KIPROTYCH/Group-B-Project.git

Table of Content

1. Description.
2. Project Setup.
3. Installation Requirements.
4. Technology Used.
5. License.
6. Auther.

Description

The project aims to implement a mini web app using React to practice essential concepts such as components, props, state, events, and data fetching. The web app is designed to display a list of bots and provide additional functionalities like enlisting and releasing bots for a user's army.

Key Features:

Components and Props:

The app utilizes React components to create modular and reusable UI elements. Components like BotCollection and YourBotArmy are employed to display the available bots and the user's enlisted bots, respectively. Props are used to pass data from parent components to child components, enabling seamless data transfer and rendering.

State and Events:

React's state management is employed to handle dynamic data within the application. The useState hook is utilized to manage the list of bots and the enlisted bots. Events like enlisting and releasing bots trigger state updates, ensuring a responsive user interface.

Data Fetching:

The app utilizes the Axios library to fetch data from an API endpoint. Upon loading, the app retrieves a list of bots from the server and stores it in the application's state for rendering on the UI.

Grid Layout:

To enhance the UI's visual appeal and organization, the bots are displayed in a grid layout. This layout dynamically adjusts based on available space, ensuring a clean and aesthetically pleasing presentation.

Project Setup

Installation Requirements

1. A Functional Laptop.
2. A good internet connection.
3. VS Code.
4. GitHub Account.
5. Postman

Technology Used

Ubuntu:

A widely used open-source operating system based on Linux, known for its user-friendly interface and community-driven development.

VS CODE:

A source code editor that offers a wide range of features for developers, including debugging, extensions, and customization options.

Github:

A web-based platform where developers can store, manage, and share their code repositories and collaborate on projects among developers worldwide.

React.js:

An open-source JavaScript library for building user interfaces. It uses JSX, a JavaScript syntax extension for defining UI components. With its virtual DOM and one-way data flow, React efficiently updates the actual DOM. Developers favor React for its simplicity and reusability, making it a top choice for modern web development.

CSS:

Cascading Style Sheets is a language used to describe the appearance and formatting of HTML elements in web pages, enabling visual design and layout control.

DB Jason:

A special way to store and exchange data, similar to JSON. It's designed for databases and makes it easier to save and retrieve information efficiently.

Conclusion

This mini web app showcases a practical implementation of React concepts, allowing users to interact with a list of bots and build their own bot army. By integrating components, props, state, events, and data fetching, the project demonstrates a fundamental understanding of React's core features, paving the way for more complex and feature-rich applications in the future.

License

The content of this repository is licensed under the MIT License.