# EchoReads Next.js A modern Next.js application for EchoReads - Your Digital Reading Companion. ## Features - ⚛️ Next.js 14 with App Router - 🎨 Tailwind CSS for styling - 📱 Fully responsive design - 🌓 Dark/Light theme support - 🔒 Protected routes with middleware - 🚀 Optimized performance with code splitting - ✅ TypeScript for type safety - 🧪 Comprehensive test coverage - 🔐 Secure authentication - 📊 SEO optimized ## Getting Started ### Prerequisites - Node.js 18+ - npm or yarn ### Installation 1. Clone the repository or navigate to the project directory 2. Install dependencies: ```bash npm install ``` 3. Environment variables are already configured! The `.env.local` file has been created with: - API URL: `https://api.echoreads.online/api/v1` - Demo mode: `false` (disabled) - App URL: `http://localhost:3000` If you need to modify these, edit `.env.local` file. 4. Verify setup (optional): ```bash node verify-setup.js ``` ### Development To start the development server: ```bash npm run dev ``` The app will open in your browser at [http://localhost:3000](http://localhost:3000). ### Build for Production ```bash npm run build npm start ``` ### Testing ```bash npm test npm run test:watch npm run test:coverage ``` ## Project Structure ``` echoreads-nextjs/ ├── app/ # Next.js App Router │ ├── (auth)/ # Auth routes group │ ├── (protected)/ # Protected routes group │ ├── api/ # API routes │ ├── layout.tsx # Root layout │ └── page.tsx # Home page ├── components/ # React components │ ├── Layout/ # Layout components │ ├── UI/ # UI components │ └── ErrorBoundary.tsx # Error boundary ├── contexts/ # React contexts ├── hooks/ # Custom hooks ├── lib/ # Utilities and services │ ├── api.ts # API service │ ├── auth.ts # Auth service │ └── logger.ts # Logging utility ├── middleware.ts # Next.js middleware for route protection ├── types/ # TypeScript types └── public/ # Static assets ``` ## Improvements Over Previous Version ✅ **Environment Variables** - All API URLs and configs use env variables ✅ **Protected Routes** - Middleware-based route protection ✅ **No Console Logs** - Proper logging utility ✅ **Error Boundaries** - Comprehensive error handling ✅ **Code Splitting** - Automatic with Next.js ✅ **SEO Optimized** - Meta tags and Open Graph ✅ **Type Safety** - Fixed typo (magzine → magazine) ✅ **Tests** - Comprehensive test coverage ✅ **Performance** - Optimized images and lazy loading ✅ **Security** - Proper token management and validation ## Technologies Used - **Next.js 14** - React framework - **TypeScript** - Type-safe JavaScript - **Tailwind CSS** - Utility-first CSS framework - **React Context** - State management - **Jest** - Testing framework ## Learn More - [Next.js Documentation](https://nextjs.org/docs) - [React Documentation](https://react.dev/) - [TypeScript Documentation](https://www.typescriptlang.org/) - [Tailwind CSS Documentation](https://tailwindcss.com/) # echoreads