Skip to content

Latest commit

 

History

History
157 lines (108 loc) · 4.77 KB

learn.md

File metadata and controls

157 lines (108 loc) · 4.77 KB

📘 Learn Trip Planner

Welcome to the Trip Planner codebase learning guide! This document helps you understand the structure, key components, and technologies used in this AI-powered MERN travel planning application.

🧠 What You’ll Learn

  • How a full-stack MERN application is structured
  • How to integrate AI chatbot features
  • Firebase authentication implementation
  • Building multilingual, responsive React apps with TypeScript
  • Working with REST APIs and MongoDB in Node.js
  • Managing routes, states, and reusable components
  • Admin dashboard and role-based access
  • Real-world full-stack project deployment practices

🗂️ Project Overview


react\_app/
├── client/         # Frontend - React + Vite + TypeScript
├── server/         # Backend - Node.js + Express + MongoDB
├── README.md       # Main documentation
├── Contributing.md # Contribution guidelines
├── vite.config.ts  # Vite config
└── tsconfig.\*.json # TypeScript configurations

🧩 Core Concepts Explained

🔹 Frontend (client/)

File/Folder Purpose
src/App.tsx Root component for routing & layout
components/ Reusable UI elements like navbar, chatbot, footer
pages/ Page-specific views like home, Places, Admin
utils/ Utility functions (e.g. toasts, error handling)
i18n.js Multi-language setup using react-i18next
assets/images/ Site visuals used in pages and UI
responsive.css Custom CSS for mobile responsiveness

Tip: Learn how routing and lazy loading is done in App.tsx.

🔹 Backend (server/)

File Purpose
server.js Main Express server with MongoDB connection
routes/ (If added) Contains API route files (e.g. /places, /users)
controllers/ (Optional) Logic separated from routes for clean code
models/ Mongoose schemas (e.g. Place, Booking, User)

Make sure you understand how MongoDB connection is initialized in server.js.

🔹 Authentication

  • Uses Firebase Authentication for:
    • Sign up / Sign in with email
    • Secure session management
  • Firebase config is added in frontend, and optionally used on backend if needed.

🔹 AI Chatbot Integration

  • The chatbot component (chatbot.tsx) sends user queries to an API endpoint.
  • You can connect it with OpenAI, LangChain, or a custom model.
  • Check how messages are managed and styled in Message.tsx.

🌍 i18n - Multilingual Support

  • Implemented via react-i18next
  • English, Hindi, and French are supported
  • Strings are defined in locale files and translated using t('key')

🧪 Testing the App

# Frontend
cd client
npm install
npm run dev

# Backend (in a separate terminal)
cd server
npm install
npm start
  • App runs on: http://localhost:5173
  • API runs on: http://localhost:5000

Ensure your MongoDB and Firebase setup is ready before launching.

📌 Contribution-Friendly Areas

Want to learn by building? Here are beginner-friendly parts:

Feature Skills Involved
Add more chatbot prompts JS, API calls
Add new destination cards React, design
Add language to i18n JSON, react-i18next
Improve responsive layout CSS/Bootstrap
Add toast on booking toastUtils.ts

🔮 Suggested Extensions

You can try adding:

  • ⏰ Trip Countdown widget
  • 📱 Convert web app to PWA
  • 💬 WebSocket-based real-time chat
  • 📷 Gallery page with image upload
  • 🧾 PDF itinerary export

📚 Recommended Learning Paths

Topic Resource
React + TypeScript react-typescript-cheatsheet
Firebase Auth Firebase Docs
MERN Basics freeCodeCamp MERN Guide
i18n in React react-i18next Docs
MongoDB Mongoose Mongoose Quick Start

🙌 Final Note

Whether you're here to learn web dev, contribute to open source, or build your portfolio, Trip Planner is a great playground. Make sure to read Contributing.md before submitting PRs.

Happy coding! 💻🌏