⚛️ DanielGeek's React & Next.js Projects

Welcome to my collection of modern web applications built with React, Next.js, and related technologies. This repository showcases a wide range of projects, from fundamental learning exercises to production-ready applications, featuring:

• Modern React (Hooks, Context API, Custom Hooks)
• TypeScript for type safety
• State Management (Redux, Context API, Zustand)
• Full-stack applications with various backends
• Testing (Jest, Vitest, React Testing Library)
• UI/UX with modern CSS solutions
• API Integrations (REST, GraphQL, WebSockets)
• Blockchain and Web3 applications

Each project is self-contained with its own documentation and setup instructions.

---

� Tech Stack Highlights

Core Technologies

• React 18/19: Concurrent features, hooks, and modern patterns
• Next.js 13/14: App Router, Server Components, and API routes
• TypeScript 5+: Type safety and developer experience
• Vite 4+: Next-generation frontend tooling

State Management

• Context API: Built-in React state management
• Redux Toolkit: Predictable state container
• Zustand: Lightweight state management
• React Query: Server state management

Styling

• Tailwind CSS: Utility-first CSS framework
• CSS Modules: Scoped CSS for components
• Styled Components: CSS-in-JS solution
• Shadcn/UI: Beautifully designed components

Testing

• Vitest: Blazing fast test runner
• Jest: Comprehensive testing framework
• React Testing Library: Component testing
• Cypress: E2E testing

Backend & APIs

• Node.js & Express: API development
• MongoDB & Mongoose: NoSQL database
• Firebase: Authentication & real-time database
• GraphQL: Efficient data querying
• tRPC: End-to-end typesafe APIs

Deployment & DevOps

• Vercel: Frontend hosting
• Netlify: Static site hosting
• GitHub Actions: CI/CD pipelines
• Docker: Containerization

---

🚀 Featured Deployments

Project	Live Demo	Tech
69-Nodebase (Workflow Automation)	GitHub	Next.js 15, React 19, TypeScript, tRPC, Prisma, PostgreSQL, TailwindCSS, React Flow
Gifs Search App	Live Demo • GitHub	React 19, TypeScript, Vite, GIPHY API, Custom Hooks
QuickGPT (AI SaaS Chat App)	Live Client / Server	React 19, Vite, TailwindCSS 4, Context API, React Router, Stripe, OpenAI, ImageKit
QuickAI (AI SaaS App)	Client / Server	React, Node.js, Express, OpenAI, Tailwind, Clerk, Vercel
Pokémon App (React)	Netlify	React, Hooks
Pokémon App (Next.js)	Vercel	Next.js, SSG
Teslo Shop	Heroku	Next.js, MongoDB
MERN Calendar App	Heroku	React, Mongo, Express
RPS Game	Heroku	React, Redux, Mongo
Journal App	Netlify	React, Firebase
Heroes SPA	Netlify	React, Auth, Routing
Drinks App	Netlify	React, Context
Songs App	Netlify	Axios, Hooks
Crypto App	Netlify	React, Styled Components
Weather App	Netlify	React, API
Insurance Quote	Netlify	Hooks, Styled Components
Budget App	Netlify	Hooks
Appointments App	Netlify	Hooks, LocalStorage
GIFExpert App V2	Netlify	Hooks, API
GIFExpert App V1	GitHub Pages	Hooks, API
Movies App	Netlify	React, Class Components
Images App	Netlify	React, Pixabay API
Breaking Bad App	Netlify	API, Styled Components

---

� Featured Projects

🌟 Latest Additions

69-hooks-app - React Hooks Examples Collection

A comprehensive collection of React Hooks examples demonstrating modern React patterns and best practices.

Tech Stack: React 19, TypeScript 5.9, Vite 7, Tailwind CSS 4

Key Features:

• 🚦 Interactive Traffic Light with useState
• ⏱️ Automatic Traffic Light with useEffect
• 🎣 Custom Hooks for API data fetching
• 🔍 Form focus management with useRef
• 🎨 Modern UI with Tailwind CSS
• 🏗️ Type-safe implementation with TypeScript

Source Code: View on GitHub

---

68-gifs-app - Modern GIF Search Application

A feature-rich GIF search application built with React 19 and TypeScript, showcasing modern web development practices.

Tech Stack: React 19, TypeScript 5.9, Vite 7, GIPHY API, CSS Modules

Key Features:

• ⚡ Real-time search with debouncing
• 💾 Persistent search history with localStorage
• 🎨 Responsive grid layout with smooth animations
• 🔍 Type-safe implementation with TypeScript
• 🧩 Custom hooks for state management
• 🚀 Optimized performance with code splitting
• 🧪 100% test coverage with Vitest

Live Demo: View Live Source Code: View on GitHub

69-nodebase - Workflow Automation

A full-stack workflow automation tool built with Next.js 15 and modern web technologies.

Tech Stack: Next.js 15, React 19, TypeScript, tRPC, Prisma, PostgreSQL, TailwindCSS, React Flow

📚 Learning & Fundamentals

• 67-first-steps-react – React fundamentals learning project featuring a shopping cart application. Demonstrates component composition, state management with hooks (useState), TypeScript integration, CSS modules, and comprehensive testing with Vitest. Includes interactive item counters with add/remove functionality, conditional styling, and full test coverage with React Testing Library. Built with React 19, Vite 7, and TypeScript 5.9.

• 66-reinforcement – TypeScript fundamentals reinforcement project. Covers ES6+ concepts including const/let, template strings, object/array destructuring, promises, async/await, fetch API, and TypeScript types. Built with Vite and TypeScript.

🤖 AI & Machine Learning

• 64-QuickGPT – AI-powered chat application with advanced features.

  • Features:
    • Multi-chat management
    • Dark/light theme support
    • Credits system
    • Community gallery
    • Image generation
  • Tech Stack: React 19, Vite 7, TailwindCSS 4, Context API, OpenAI API
  • Live Demo: QuickGPT Client
  • Server: QuickGPT Server

• QuickAI – AI-powered SaaS application

  • Features:
    • User authentication
    • AI model integration
    • Subscription management
    • Responsive design
  • Tech Stack: React, Node.js, Express, OpenAI, Clerk, Vercel
  • Live Demo: QuickAI Client
  • Server: QuickAI Server

🧪 Testing & Quality

• 32-color-button-tests – Testing basics with React Testing Library.

  • Covers component rendering, user interactions, and assertions
  • Demonstrates best practices for testing React components

• 32-react-testing-library-examples – Comprehensive form testing examples.

  • Form validation testing
  • User interaction simulation
  • Async operation testing

• dab-product-card – Component testing in isolation.

  • Unit tests for product UI components
  • Snapshot testing
  • Prop validation

• 32-jest-examples – Advanced Jest features.

  • Mocking modules
  • Testing async code
  • Snapshot testing
  • Code coverage reports

• testing-store-app – E2E testing example.

  • Integration testing
  • CI/CD pipeline integration
  • Test automation

🧰 State Management & Redux

• 35-react-redux, 46-toolkit-redux, 40-redux-ts – Examples using Redux Toolkit and TS.
• 24-MERN_Task, 39-auth-company-test – Task manager and auth flow with Redux.

📅 Real-world Apps

• 09-calendar-app, 34-calendar-appv2, 49-calendar-backend-2022 – Full MERN stack calendar.
• 27-trello-clone, 50-slack-clone, 51-tik-tok-clone – UI clones with Firebase and styled-components.

⚡️ Advanced Topics

• 54-graphql-projects, 58-users-graphql, 59-Lyrical-GraphQL – GraphQL client & backend.
• 60-vehicle-reservation, 62-blog-challenge – App challenges with testing & UI.
• 52-next, 26-react-typescript, 33-my-storybook – Advanced setups, Storybook integration.

⛓️ Blockchain & Web3

Staking dApp

• Description: A decentralized application for staking tokens and earning rewards
• Features:
  • Connect Web3 wallet (MetaMask)
  • Stake and unstake tokens
  • View staking rewards
  • Transaction history
• Tech Stack: Next.js, Solidity, Hardhat, Ethers.js, Web3.js
• Source Code: Staking dApp

Blockchain Projects Collection

• Description: A collection of blockchain and Web3 projects
• Projects Include:
  • NFT Marketplace
  • Token Swap
  • DAO Governance
  • DeFi Protocols
• Tech Stack: React, Solidity, Hardhat, IPFS, The Graph
• Repository: Blockchain Projects

Smart Contract Development

• Smart Contract Auditing
• Gas Optimization
• Security Best Practices
• Integration with Frontend

---

🚀 Getting Started

Prerequisites

• Node.js 18+ (LTS recommended)
• npm 9+ or yarn 1.22+
• Git

Installation

1. Clone the repository:

   git clone https://github.com/DanielGeek/react_proyects.git
   cd react_proyects

2. Navigate to the project directory:

   cd [project-folder]

3. Install dependencies:

   npm install
   # or
   yarn

4. Set up environment variables (if required):

   cp .env.example .env
   # Edit .env with your configuration

5. Start the development server:

   npm run dev
   # or
   yarn dev

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm test - Run tests
• npm run lint - Lint code
• npm run format - Format code

🤝 Contributing

Contributions are welcome! Please read the Contributing Guide for details on our code of conduct and the process for submitting pull requests.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

📬 Contact

• GitHub: @DanielGeek
• Twitter: @YourTwitter
• LinkedIn: Your Name
• Email: [email protected]