Get Set Go

Project Overview

Get Set Go is a React application that demonstrates comprehensive CRUD (Create, Read, Update, Delete) operations and is deployed using “Vercel” which provides seamless updates with git pushes.

Source code - https://github.com/palashshrote/getsetgo

Live on - https://getsetgo-two.vercel.app/

Development Journey

Phase 1: Foundation Setup

• Initialised React project with Vite

• Set up basic component structure

• Implemented initial UI layout

  

Phase 2: Core Functionality & State Management

• Added user input handling with useState hook

• Implemented CRUD operations

• Created form components for data entry

• Lifted state up to parent components

• Established data flow between sibling components

• Implemented props passing for component communication

  

Phase 3: Styling & UI

• Applied CSS styling for visual appeal

• Implemented Flexbox for responsive layouts

• Fine-tuned component alignment and spacing

  

Phase 4: Vercel Deployment Process

• Repository Connection: Connected GitHub repository to Vercel

• Build Configuration: Automatic detection of Vite build settings

• Continuous Deployment: Enabled automatic deployments as branch updates

Challenges & Solutions

1. Component Styling & Alignment

Challenge: Difficulty achieving proper component alignment and responsive layout

Solution:

• Researched CSS Flexbox properties

• Applied flex container and item properties

• Used AI assistance (ChatGPT) for specific styling issues

• Referenced CSS-Tricks Flexbox guide for best practices

Key Flexbox Properties Used:

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

Component Hierarchy

State Management

useState Hook Implementation

const [items, setItems] = useState(initialItems);//initialItems is dummy items array of js object
const [des, setDes] = useState("");
const [quantity, setQuantity] = useState(1);
const [sortBy, setSortBy] = useState("input");

State Lifting Pattern

• Moved shared state to the closest common ancestor (App in this case)

• Passed state down as props (items were passed to PackingList, Item and Stats)

• Used callback functions for state updates

Data Flow Architecture

1. User interaction triggers the event handler

2. The event handler calls the parent callback function

3. Parent updates state

4. State change triggers re-render

5. Updated data flows down to child components

Styling Approach

CSS Organization

• Component-specific styles: Individual CSS files for components

• Responsive styles: Media queries for different screen sizes

Flexbox Implementation

• Container Properties: display: flex, flex-direction, justify-content , align-items

• Responsive Behaviour: Flexible layouts that adapt to content

Future Enhancements

Planned Features

• Data Persistence: Integration with localStorage or an external API

• User Authentication: User accounts and personalised data

• Advanced Filtering: Search and filter functionality

• Data Validation: Enhanced form validation and error handling

• Animations: Smooth transitions and micro-interactions

Technical Improvements

• State Management: Migration to Context API or Redux

• Testing: Unit and integration tests with Jest/React Testing Library

• Performance: Code splitting and lazy loading

• Accessibility: ARIA labels and keyboard navigation

Learning Outcomes

Technical Skills Developed

• React hooks and functional components

• State management and component communication

• CSS Flexbox and responsive design

• Modern JavaScript ES6+ features

• Git version control workflow

• Cloud deployment with Vercel

Problem-Solving Experience

• Debugging component rendering issues

• Resolving CSS layout problems

• Managing complex state relationships

• Optimising application performance

Acknowledgments

Educational Resources

• Jonas Schmedtmann - Comprehensive React tutorials that provided the foundation for this project

• Chris Coyier - Flexbox guide that provided clear visual examples and practical applications

Development Tools

• ChatGPT - AI assistance for resolving specific styling and structural challenges

---

This documentation serves as a comprehensive guide to the “Get Set Go” project, covering its development journey, technical implementation, and future roadmap.