Frontend Challenges Showcase

A collection of frontend projects showcasing my development skills and learning journey.

🚀 Live Demo

View Live Site

📋 Projects Included

1. Tic Tac Toe Game

• Tech Stack: React, CSS, JavaScript
• Features: Interactive game, responsive design
• Live Demo: Play Game

2. Social Links Profile

• Tech Stack: HTML, CSS
• Features: Responsive design, hover effects
• Source: Frontend Mentor Challenge
• Live Demo: View Project

3. QR Code Component

• Tech Stack: HTML, CSS
• Features: Clean card design, mobile-first approach
• Source: Frontend Mentor Challenge
• Live Demo: View Project

4. Dictionary App

• Tech Stack: React, JavaScript, API Integration
• Features: Word definitions, phonetic pronunciations, error handling
• API: Dictionary API
• Live Demo: View Project

5. To-Do List App

• Tech Stack: React, JavaScript, Local Storage
• Features: CRUD operations, task priorities, due dates, persistence
• Advanced: State management, useEffect hooks
• Live Demo: View Project

🛠️ Technologies Used

• Framework: Next.js 13 (App Router)
• Frontend: React, TypeScript
• Styling: Tailwind CSS
• Icons: Lucide React
• Deployment: Netlify

🚀 Getting Started

Requirements

• Node.js (v18 or higher)
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/sandra395/Frontend-challenges-showcase.git

# Navigate to project directory
cd Frontend-challenges-showcase

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

The app will be available at http://localhost:3000

📱 Features

• Responsive Design: Works seamlessly on all devices
• Modern UI: Clean and professional interface with Tailwind CSS
• Fast Performance: Built with Next.js for optimal loading speeds
• Type Safety: TypeScript for better code quality
• Project Cards: Interactive cards showcasing each project with links
• Image Optimization: Next.js Image component for fast loading

🎯 Learning Journey

This showcase demonstrates my progression from basic HTML/CSS to modern React applications:

• Component Architecture: Building reusable React components
• State Management: Using React hooks (useState, useEffect)
• API Integration: Fetching and handling external data
• Local Storage: Persisting data in the browser
• Responsive Design: Mobile-first approach with Tailwind CSS
• TypeScript: Type-safe development
• Next.js: Server-side rendering and static site generation

📂 Project Structure

Frontend-challenges-showcase/
├── app/                 # Next.js App Router pages
├── components/          # React components
├── data/               # Project data (JSON)
├── public/             # Static assets
└── tailwind.config.ts  # Tailwind configuration

🤝 Contributing

This is a personal portfolio project, but feedback and suggestions are always welcome!

📄 License

This project is open source and available under the MIT License.

👤 Author

Sandra Barbosa

• GitHub: @sandra395
• Portfolio: Frontend Challenges Showcase