React Program Portfolio 🚀

Welcome to my React development journey! This repository showcases my progression through the React Nanodegree Program from the School of Programming and Development.

📚 Program Overview

This comprehensive program covers:

• Building declarative user interfaces for the web with React
• Creating mobile applications with React Native (iOS and Android)
• Managing application state predictably with Redux
• Advanced testing techniques with Jest
• Modern development practices and best practices

🛠 Skills & Technologies Learned

React Fundamentals

• React Component State & Lifecycle
• React Router & Navigation
• React Design Patterns
• React Hooks (useState, useEffect, custom hooks)
• JSX & JavaScript Composition
• Create React App

React & Redux

• Application State Management with Redux
• React-Redux Bindings
• Redux Middleware & Redux-Thunk
• Asynchronous Redux Operations
• Jest Testing Framework
• Test-Driven Development (TDD)
• Integration & Unit Testing

React Native (Extracurricular)

• Expo Development Environment
• React Native Components & Navigation
• AsyncStorage & Data Management
• Native OS APIs Integration
• Redux Toolkit
• Mobile-First Design & Flexbox

Additional Technologies

• Git & GitHub Version Control
• HTML5 & CSS3
• JavaScript ES6+
• RESTful APIs
• Mobile App Development

📁 Repository Structure

React_Udacity/
├── MyReads/                    # Submodule: Book tracking application
│   └── my-reads/              # Complete MyReads React project
├── gadgets_selling/           # E-commerce related projects
├── .idea/                     # IDE configuration files
└── README.md                  # This file

🏆 Featured Projects

1. MyReads: A Book Tracking App

📖 View Project

A web application that allows you to select and categorize books into three shelves:

• Currently Reading
• Want to Read
• Read

Features:

• Search for books using real-time API
• Move books between shelves with drag-and-drop
• Responsive design for desktop and mobile
• State persistence between sessions
• React Router for seamless navigation

Technologies: React 18, React Router v6, React DnD, CSS3, Udacity Books API

2. Employee Polls Web App (Coming Soon)

HR polling application for employees to create and respond to scenario questions with voting functionality and dashboard analytics.

3. Customer Relationship Management App (Coming Soon)

React Native mobile application for sales representatives to manage customer contact information.

🚀 Getting Started

Prerequisites

• Node.js (v16 or later)
• npm or yarn
• Git

Installation

1. Clone the repository:

   git clone --recursive https://github.com/krillavilla/React_Program.git
   cd React_Program

2. Navigate to a specific project:

   cd MyReads/my-reads

3. Install dependencies:

   npm install

4. Start development server:

   npm start

5. Open your browser: Navigate to http://localhost:3000

💻 Development Setup

MyReads Project

cd MyReads/my-reads
npm install
npm start          # Development server
npm test           # Run tests
npm run build      # Production build

📋 Course Curriculum Completed

✅ Completed Modules

• Welcome to React Nanodegree (45 minutes)
• React Fundamentals (12 hours)
  • Why React
  • Rendering UI with React
  • State Management
  • Hooks
  • Routing
  • Project: MyReads App ✨
• React and Redux (27 hours)
• React Native (18 hours) - Extracurricular
• Git and GitHub (7 hours)

🎯 Learning Outcomes

• ✅ Master React component architecture
• ✅ Implement proper state management
• ✅ Build responsive, interactive UIs
• ✅ Handle routing in single-page applications
• ✅ Work with external APIs
• ✅ Apply modern development practices

👨‍🏫 Program Instructors

The program features industry experts including:

• Tyler McGinnis - Google Developer Expert, React community leader
• Alyssa Hope - Full Stack Developer & Lead Instructor
• Michael Tsamis - Senior Software Engineer at Catchpoint Systems
• Andrew Wong - Full Stack Engineer & Former App Academy Instructor
• Richard Kalehoff - Course Developer with Computer Science background

🏅 Why This Program

Practical Project-Based Learning:

• Real-world scenarios and challenges
• Hands-on experience with industry tools
• Immediate application of learned skills

24/7 Human Support:

• Expert code reviews and feedback
• Subject matter expert guidance
• Industry best practices

🌟 Connect & Collaborate

• 🐙 GitHub: @krillavilla
• 📧 Contact: Available through GitHub

📜 License

This project is licensed under the MIT License - see individual project directories for specific licensing information.

🙏 Acknowledgments

• Udacity and the School of Programming and Development
• Accenture for educational partnership
• The React community for continuous innovation
• All instructors who contributed to this learning journey

---

⭐ Star this repository if you find it helpful!

Last Updated: October 2024