There is existing code based on Django REST that exports OpenAPI specification for all calls that are needed for the frontend. Currently there is a Django views frontend, but we need to switch to React front for better experience.
The task is to create a clone of the Candy.ai website, focusing on a mobile-first approach and subsequently adapting it for desktop. The clone should utilize Next.js as the frontend framework and integrate with a backend using OpenAPI (Swagger) specifications. The design should leverage the Preline framework, which is based on Tailwind CSS, to replicate elements from Candy.ai without needing a specific design.
The project involves replicating the core functionalities and design elements of Candy.ai, a platform known for its customizable AI companion experience. The clone should include the following features:
- All Pages from Candy.ai: The flow is exacly the same as in Candy.ai. User can interact with website, until the level 2 interaction. Level 2 interaction - when REST API returns "Not authorized" response, show login modal.
- AI Companion Customization: Allow users to customize their virtual partners' appearance, personality traits, and interests.
- AI Technologies: No need to implement natural language processing, machine learning, and computer vision to facilitate realistic dialogues and AI-generated imagery.
- Freemium Model Features: Include features like unlimited text messages, image generation, and voice messaging.
- Data Privacy and Security: Ensure compliance with data protection laws and implement data encryption for all conversations.
- Emotional Support and Personal Connections: Offer features like AI-generated voice messages and role-play scenarios.
- Next.js: Utilize Next.js for its server-side rendering (SSR) and static site generation (SSG) capabilities, which are crucial for optimizing mobile performance and improving SEO.
- Mobile-First Design: Implement responsive design using media queries and flexible units to ensure seamless adaptation across various screen sizes.
- Dynamic Server Rendering: Use dynamic server rendering to improve mobile performance by generating HTML on the server side.
- Preline (Tailwind CSS): Use Preline to replicate design elements from Candy.ai, ensuring a consistent and modern UI without the need for a specific design.
- OpenAPI (Swagger) Specification: Define and document the API endpoints using OpenAPI specifications to facilitate seamless integration with the backend.