Web Quequeo 🚀

Welcome to Web Quequeo, a modern frontend application developed with ReactJS and styled using Material-UI. This application serves as the user interface for the Quequeo platform and is designed to work seamlessly with its corresponding backend API.

System Requirements 🛠️

Node.js: 18+ React: 18.3.1 Material-UI: 6.2.1 Motion: 11.13.1

Project Structure 📁

src/
  components/     # Reusable UI components (e.g., Navbar, Footer, Badges)
  context/        # ThemeContext for handling theme and localization
  pages/          # Pages like About Me, Quequeo, and Work Experience
  styles/         # Global styling and theming
  utils/          # Helper functions and API client setup
  App.js          # Main app entry point
  index.js        # React DOM rendering

Key Components

• SimpleNavbar: Navigation bar used across all pages.
• Footer: Footer with relevant links and branding.
• WorkExperienceDetails: Displays details for the Work Experience page.
• AnimatedText: Adds animation effects to text elements.
• Badges: Showcases skill or experience badges.

---

Initial Setup ⚙️

1. Clone the repository

   git clone https://github.com/your-username/web-quequeo.git
   cd web-quequeo

2. Install dependencies:

   npm install

3. Run the development server:

   npm start

The application will be available at http://localhost:3001

---

Features 🌟

1. Dynamic Content:

• Fetches data dynamically using Axios from the backend API.
• Localized content based on the selected language (en or es).

2. Responsive Design:

• Optimized for desktop and mobile devices using Material-UI.

3. Smooth Animations:

• Uses Motion for smooth transitions and animations across.

4. Reusable Components:

• Modular design ensures code reusability and ease of maintenance.

---

Additional Libraries 🔧

• Material-IU: Provides a modern UI framework with customizable components.
• Motion: Enables smooth animations and transitions.
• Axios: Handles API requests efficiently.

---

Deployment 🚢

Deploying to Vercel

This application is configured to deploy easily on Vercel. Follow these steps:

Option 1: Deploy via Vercel Dashboard (Recommended)

1. Create a Vercel Account

   • Go to vercel.com
   • Sign up with your GitHub account

2. Import Your Repository

   • Click "Add New Project"
   • Import your web-quequeo repository from GitHub
   • Vercel will automatically detect it's a React app

3. Configure Environment Variables

   • In the project settings, add these environment variables:
     • REACT_APP_API_BASE_URL: Your backend API URL
     • REACT_APP_WEB_QUEQUEO_SECRET_KEY: Your secret key
   • You can find these in your current .env file

4. Deploy

   • Click "Deploy"
   • Vercel will build and deploy your app automatically
   • You'll get a URL like https://web-quequeo.vercel.app

Option 2: Deploy via Vercel CLI

1. Install Vercel CLI

   npm install -g vercel

2. Login to Vercel

   vercel login

3. Deploy

   vercel

   • Follow the prompts
   • Add environment variables when asked

4. Deploy to Production

   vercel --prod

Automatic Deployments

Once connected to Vercel:

• Every push to main branch automatically deploys to production
• Pull requests create preview deployments
• No manual intervention needed!

Custom Domain (Optional)

1. Go to your project settings in Vercel
2. Navigate to "Domains"
3. Add your custom domain
4. Follow DNS configuration instructions

---

Limitations and Future Plans 🚧

1. No Testing Framework:

• Currently, no automated tests are configured (e.g., Jest or Cypress).

2. Planned Enhancements:

• Integration of testing frameworks.
• Further optimization for performance and accessibility.

---

Author 👥 Developed by Jaime F. García Méndez