|
| 1 | +# RealWorld Frontend |
| 2 | + |
| 3 | +A modern React frontend application that consumes the Spring Boot RealWorld API. |
| 4 | + |
| 5 | +## Features |
| 6 | + |
| 7 | +- **User Authentication** - Registration, login, JWT token management |
| 8 | +- **Article Management** - Create, view, edit, delete articles with markdown support |
| 9 | +- **Article Feed** - Global feed displaying all articles with pagination |
| 10 | +- **User Profiles** - User information and article listings |
| 11 | +- **Comments System** - Add and view comments on articles |
| 12 | +- **Social Features** - Following users, favoriting articles |
| 13 | +- **Tag System** - Article categorization and filtering |
| 14 | +- **Responsive Design** - Modern UI built with Tailwind CSS |
| 15 | + |
| 16 | +## Technology Stack |
| 17 | + |
| 18 | +- **React 18** with TypeScript for type safety |
| 19 | +- **Vite** for fast development and building |
| 20 | +- **Tailwind CSS** for modern, responsive styling |
| 21 | +- **React Router** for navigation |
| 22 | +- **Axios** for API communication with JWT authentication |
| 23 | + |
| 24 | +## Getting Started |
| 25 | + |
| 26 | +### Prerequisites |
| 27 | + |
| 28 | +- Node.js 16+ and npm |
| 29 | +- Spring Boot backend running on http://localhost:8080 |
| 30 | + |
| 31 | +### Installation |
| 32 | + |
| 33 | +```bash |
| 34 | +cd frontend |
| 35 | +npm install |
| 36 | +``` |
| 37 | + |
| 38 | +### Development |
| 39 | + |
| 40 | +```bash |
| 41 | +npm run dev |
| 42 | +``` |
| 43 | + |
| 44 | +The application will be available at http://localhost:3000 |
| 45 | + |
| 46 | +### Build for Production |
| 47 | + |
| 48 | +```bash |
| 49 | +npm run build |
| 50 | +``` |
| 51 | + |
| 52 | +## API Integration |
| 53 | + |
| 54 | +The frontend integrates with the Spring Boot RealWorld API running on localhost:8080: |
| 55 | + |
| 56 | +- **Authentication**: POST /users/login, POST /users |
| 57 | +- **Articles**: GET/POST/PUT/DELETE /articles |
| 58 | +- **Profiles**: GET /profiles/{username} |
| 59 | +- **Comments**: GET/POST/DELETE /articles/{slug}/comments |
| 60 | +- **Tags**: GET /tags |
| 61 | + |
| 62 | +All API calls include proper JWT authentication headers in the format: `Authorization: Token {jwt}` |
| 63 | + |
| 64 | +## Project Structure |
| 65 | + |
| 66 | +``` |
| 67 | +frontend/ |
| 68 | +├── src/ |
| 69 | +│ ├── components/ # Reusable UI components |
| 70 | +│ ├── pages/ # Page components (Home, Login, Register, etc.) |
| 71 | +│ ├── services/ # API integration layer |
| 72 | +│ ├── hooks/ # Authentication context and hooks |
| 73 | +│ ├── types/ # TypeScript interfaces |
| 74 | +│ └── App.tsx # Main application component |
| 75 | +├── package.json # Dependencies and scripts |
| 76 | +├── vite.config.ts # Vite configuration |
| 77 | +├── tailwind.config.js # Tailwind CSS configuration |
| 78 | +└── tsconfig.json # TypeScript configuration |
| 79 | +``` |
0 commit comments