diff --git a/README.md b/README.md index de13f49d7..9138564e5 100644 --- a/README.md +++ b/README.md @@ -1,20 +1,82 @@ # React Projects -#### React Course +A collection of React projects built as part of the **React Course** by John Smilga. Each project focuses on a specific React concept, progressing from fundamental hooks to more advanced topics such as React Router, Context API, and Reducers. -[My React Course](https://www.udemy.com/course/react-tutorial-and-projects-course/?referralCode=FEE6A921AF07E2563CEF) +## Resources -#### Support +- **React Course:** [Udemy Course](https://www.udemy.com/course/react-tutorial-and-projects-course/?referralCode=FEE6A921AF07E2563CEF) +- **Tutorial Video:** [YouTube](https://youtu.be/iZhV0bILFb0) +- **Live Demo:** [Project Demo](https://react-projects.netlify.app/) +- **Support the Author:** [Buy me a Coffee](https://www.buymeacoffee.com/johnsmilga) -Find the Content Useful? [You can always buy me a coffee](https://www.buymeacoffee.com/johnsmilga) -#### Tutorial Video +## Repository Structure -[React Tutorial](https://youtu.be/iZhV0bILFb0) +Each project in this repository is organized into two directories: -#### All Projects +- **setup/** – Starter code for following along with the tutorial. +- **final/** – Completed implementation of the project. + +Each project is self-contained and includes its own `package.json`, allowing it to be installed and run independently. + +## Getting Started + +### Prerequisites + +Before running any project, ensure you have the following installed: + +- Node.js (LTS version recommended) +- npm (bundled with Node.js) +- Git + +### Installation + +1. Clone the repository. + +```bash +git clone https://github.com/john-smilga/react-projects.git +``` + +2. Navigate to the `final` directory of the project you want to run. + +```bash +cd /final +``` + +For example: + +```bash +cd 02-tours/final +``` + +3. Install the dependencies. + +```bash +npm install +``` + +4. Start the development server. + +```bash +npm start +``` + +5. Open your browser and visit: + +``` +http://localhost:3000 +``` + +## Available Scripts + +Run the following commands from within a project's directory. + +| Command | Description | +|---------|-------------| +| `npm start` | Starts the development server. | +| `npm test` | Launches the Jest test runner in watch mode. | +| `npm run build` | Creates an optimized production build. | -[Projects Site](https://react-projects.netlify.app/) ## Corresponding Tutorial Topics @@ -56,8 +118,6 @@ Find the Content Useful? [You can always buy me a coffee](https://www.buymeacoff ## Advanced Projects (Course Exclusive) -[My React Course](https://www.udemy.com/course/react-tutorial-and-projects-course/?referralCode=FEE6A921AF07E2563CEF) - 16. Markdown Preview 17. Random Person 18. Pagination @@ -66,3 +126,38 @@ Find the Content Useful? [You can always buy me a coffee](https://www.buymeacoff 21. Movie DB 22. Hacker News 23. Quiz + +--- + +## Contributing + +Contributions are welcome and appreciated. + +1. Fork the repository. +2. Create a new branch. + +```bash +git checkout -b feature/your-feature-name +``` + +3. Make and test your changes. + +4. Commit your changes. + +```bash +git commit -m "docs: improve README" +``` + +5. Push your branch. + +```bash +git push origin feature/your-feature-name +``` + +6. Open a Pull Request with a clear description of your changes. + +Before submitting your pull request, ensure that: + +- The project installs successfully using `npm install`. +- The development server starts without errors using `npm start`. +- Your changes are focused and well documented. \ No newline at end of file