GrowFolio

Introduction

DreamAI is a dream interpreting web application built with the robust React framework, powered by NextJS and fully implemented in TypeScript. DreamAI offers a seamless and responsive experience across all devices, leveraging cutting-edge technologies for optimal performance and user engagement.

Technologies Used

• ReactJS: React - A JavaScript library for building user interfaces with components, allowing for fast and scalable front-end development.

• NextJS: Vite - A modern frontend build tool that provides a faster and leaner development experience for modern web projects.

• TypeScript: TypeScript - A strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

• TailwindCSS: TailwindCSS - A utility-first CSS framework for rapidly building custom designs without leaving your HTML.

• Shadcn: Shadcn UI - A React UI library that provides a collection of high-quality components and templates to kickstart your application designs.

• Google Ai Studio: Google/generative-ai - Google's state-of-the-art generative AI models to build AI-powered features and applications.

• Supabase: Supabase - Supabase is an open source Firebase alternative. We're building the features of Firebase using enterprise-grade open source tools. Hosted Postgres Database.

• Vercel: Vercel - A platform for frontend frameworks and static sites, built to integrate with your headless content, commerce, or database.

Screenshots

Features

• Responsive layout compatible with various screen sizes.

• Comprehensive typing with TypeScript for robustness.

Local Development

To run DreamAI locally:

git clone git@github.com/ceejeey/DreamAi.git
cd DreamAi
pnpm install
npm run dev

Code Structure

• components/: Houses all custom components.
• components/ui: Stores core components provided by Shadcn.
• constants/: Contains various constants used throughout the application.
• layouts/: Contains layout components, like DashboardLayout and UnAuthLayout.
• lib/: Main utility files such as utils.ts are found here.
• app/: Parent pages that are configured in the router.

Styling

TailwindCSS has been the primary tool for crafting the application's design. Shadcn components were integrated due to their seamless compatibility with TailwindCSS, ensuring a cohesive look and feel.

Best Practices

• Strongly typed components and utilities with TypeScript.
• Performance optimization through useMemo & useCallback.
• Emphasis on component structuring and reusability for maintainable code.
• Separation of logic and UI with custom hooks.

Credit Resources

• https://supabase.com/blog/openai-embeddings-postgres-vector
• https://supabase.com/docs/guides/auth/auth-helpers/nextjs

rlEHw3Sd70OlRBoI