🚀 Digital Time Capsule - Frontend

📌 Overview

The frontend of the Digital Time Capsule is built using React.js, providing a modern, responsive, and user-friendly interface for users to store and retrieve digital memories over time. The UI ensures a seamless experience with animations, form validations, and real-time interactions.

---

📂 Folder Structure

📂 project-root
│── 📂 public
│── 📂 src
│   ├── 📂 assets
│   ├── 📂 components
│   │   ├── 📄 AuthPage.jsx
│   │   ├── 📄 LoadingSpinner.jsx
│   │   ├── 📄 NavFooter.jsx
│   │   ├── 📄 ProtectedRoute.jsx
│   ├── 📂 pages
│   │   ├── 📄 CapsuleDetails.jsx
│   │   ├── 📄 Create_Capsule.jsx
│   │   ├── 📄 DashBoard.jsx
│   │   ├── 📄 FunZone.jsx
│   │   ├── 📄 GuessTheAge.jsx
│   │   ├── 📄 Home.jsx
│   │   ├── 📄 MemoryGame.jsx
│   │   ├── 📄 Signup.jsx
│   │   ├── 📄 Success.jsx
│   │   ├── 📄 UpdateCapsule.jsx
│   │   ├── 📄 Verify_Signup.jsx
│   ├── 📂 utils
│   ├── 📄 App.jsx
│   ├── 📄 index.css
│   ├── 📄 main.jsx
│── 📄 .env
│── 📄 .gitignore
│── 📄 eslint.config.js
│── 📄 index.html
│── 📄 package-lock.json
│── 📄 package.json
│── 📄 README.md
│── 📄 vite.config.js

---

🛠 Technologies Used

• React.js – Frontend framework
• Tailwind CSS – Modern styling
• React Router – Navigation management
• Framer Motion – UI animations
• Axios – API calls
• Vite – Fast development server

---

🔧 Installation & Setup

1. Clone the Repository

git clone https://github.com/anishk85/time-capsule
cd time-capsule

2. Install Dependencies

npm install

3. Set Up Environment Variables

Create a .env file inside frontend and add:

VITE_API_URL=http://localhost:5000

4. Run the Application

npm run dev

---

🌎 Deployment

• Vercel / Netlify for hosting the frontend.

---

📌 Conclusion

The Digital Time Capsule frontend delivers a smooth and modern UI, ensuring an engaging user experience for storing and retrieving memories. 🚀