Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fredh2o/plant-care
House plant care guide built using mainly React and MUI.
https://github.com/fredh2o/plant-care
mui mui-material react react-hooks react-router reactjs
Last synced: about 2 months ago
JSON representation
House plant care guide built using mainly React and MUI.
- Host: GitHub
- URL: https://github.com/fredh2o/plant-care
- Owner: FredH2O
- License: mit
- Created: 2024-11-23T22:29:45.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-12-02T00:11:35.000Z (about 2 months ago)
- Last Synced: 2024-12-02T01:21:36.564Z (about 2 months ago)
- Topics: mui, mui-material, react, react-hooks, react-router, reactjs
- Language: JavaScript
- Homepage: https://fredh2o.github.io/plant-care/
- Size: 3.53 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React & Material-UI Practice Project
This project is a practice application designed to explore and apply key **React** concepts and **Material-UI** components. It's an excellent example of a beginner-to-intermediate project, focusing on modern React development and UI styling using Material-UI.
---
## Features
- **React Concepts**:
- Functional components and hooks (`useState`, `useEffect`, etc.).
- Component composition and props.
- State management and event handling.
- Form handling with validation.
- **Material-UI Integration**:
- Responsive layouts with Material-UI's `Grid` and `Box`.
- Styled components using Material-UI's `sx` prop.
- Customizable and accessible `Modal`, `Button`, and `Typography` components.
- Animations and transitions with Material-UI's `Fade` and `Grow`.
---
## Getting Started
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
### Prerequisites
Ensure you have Node.js and npm installed on your system. You can download them [here](https://nodejs.org/).
### Installation
1. Clone this repository:
```bash
git clone https://github.com/FredH2O/plant-care.git
```
2. Navigate to the project directory:
```bash
cd your-repo
```
3. Install dependencies:
```bash
npm install
```
---
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.\
The page will reload when you make changes.
### `npm run build`
Builds the app for production to the `build` folder.\
Optimizes the React application for the best performance.
---
## Learning Goals
### React
- Practice state management with `useState` and explore conditional rendering.
- Work with forms and input validation in a React application.
- Understand and implement reusable components.
### Material-UI
- Learn to create professional-looking UIs with Material-UI.
- Customize components using the `sx` prop for dynamic styling.
- Add animations to UI components with `Fade` and `Grow`.
---
## How It Works
### Components
1. **Contact Form**:
- A simple form where users can input their full name, email, and a message.
- Uses Material-UI's `TextField` for inputs and a `Button` for submission.
2. **Modal Component**:
- Displays a confirmation message when the form is submitted.
- Includes a fade-in animation for a polished user experience.
### Technologies Used
- **React**: Core library for building the UI.
- **Material-UI**: For creating accessible, responsive, and customizable components.
---
## Deployment
To deploy the project to a hosting platform, build the project first:
```bash
npm run build
```
Then, follow the platform-specific instructions (e.g., Vercel, Netlify, or GitHub Pages).
---
## Resources
- [React Documentation](https://reactjs.org/)
- [Material-UI Documentation](https://mui.com/)
---
Feel free to suggest any improvements or share feedback! 😊