Add documentation

.concopyuse

@@ -1,4 +1,5 @@
 *.tsx
 */**.tsx
 */**/***.tsx
-*/**/***/***.tsx
+*/**/***/****.tsx
+*/**/***/****/*****.tsx

.env.example

@@ -1,2 +1,5 @@
+NEXT_PUBLIC_POSTHOG_KEY=
+NEXT_PUBLIC_POSTHOG_HOST=
+
 NEXT_PUBLIC_SUPABASE_URL=
 NEXT_PUBLIC_SUPABASE_ANON_KEY=

README.md

@@ -1,36 +1,110 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# LogiCola
 
-## Getting Started
+LogiCola is a web-based instructional program that helps students learn logic. It is a remake of the original LogiCola software created by the late Professor Harry Gensler, built using modern web technologies.
 
-First, run the development server:
+## Project Structure
+
+The project follows a standard Next.js project structure with some additional directories and files:
+
+- `__tests__`: Contains test files for various components and pages.
+
+  - `app`: Contains tests for pages.
+  - `components`: Contains tests for individual components.
+
+- `app`: Contains the main application code.
+
+  - `[chapter]`: Dynamic route for individual chapters.
+    - `[subchapter]`: Dynamic route for subchapters within a chapter.
+      - `quiz`: Contains the quiz page for a subchapter.
+    - `layout.tsx`: Layout component for chapter pages.
+    - `page.tsx`: Page component for displaying a chapter.
+  - `auth`: Contains the authentication page.
+  - `error`: Contains the error page.
+  - `layout.tsx`: Main layout component for the application.
+  - `page.tsx`: Home page component.
+
+- `components`: Contains reusable components used throughout the application.
+
+  - `NoSSR`: Component for rendering content only on the client-side.
+  - `question`: Contains components related to displaying and interacting with questions.
+  - `quiz`: Contains components for the quiz functionality.
+  - `ui`: Contains UI components such as accordion, button, card, dropdown menu, input, and label, coming from [ShadCN UI](https://ui.shadcn.com/)
+  - Other individual component files.
+
+- `lib`: Contains utility functions and libraries.
+
+  - `serversidePostHog.ts`: PostHog client for server-side usage.
+
+  - `supabase-browser.ts`: Supabase client for browser-side usage.
+
+  - `supabase-server.ts`: Supabase client for server-side usage.
+
+  - `utils.ts`: Utility functions used in the application.
+
+- `public`: Contains public assets such as images.
+
+- `types`: Contains TypeScript type definitions.
+
+- Other configuration files and directories such as `next.config.js`, `tailwind.config.js`, `tsconfig.json`, etc.
+
+## Testing
+
+The project includes tests for various components and pages. The tests are located in the `__tests__` directory and are organized into subdirectories corresponding to the component or page being tested (they "mirror" the project structure).
+
+The tests are written using Vitest and React Testing Library.
+
+The project uses Tailwind CSS for styling. The styles are defined in the `tailwind.config.js` file and are applied to components using utility classes.
+
+## Prerequisites
+
+The project uses the PNPM package manager. To install PNPM, run the following command:
 
 ```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+npm install -g pnpm
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+For user authentication, the project uses Supabase.
+
+For analytics, the project uses PostHog.
+
+You will need to create accounts for these services and set up projects to get the required environment variables.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+## Environment Variables
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+The project uses environment variables to store sensitive information such as API keys and secrets. These variables are stored in a `.env.local` file at the root of the project.
 
-## Learn More
+The following environment variables are required:
 
-To learn more about Next.js, take a look at the following resources:
+- `NEXT_PUBLIC_SUPABASE_URL`: The URL of your Supabase project.
+- `NEXT_PUBLIC_SUPABASE_ANON_KEY`: The anonymous key for your Supabase project.
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+- `NEXT_PUBLIC_POSTHOG_API_KEY`: The API key for your PostHog project.
+- `NEXT_PUBLIC_POSTHOG_HOST`: The host for your PostHog project.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+Create a `.env.local` file at the root of the project and add these variables to it.
+
+## Installation
+
+To install the project dependencies, run the following command:
+
+```bash
+pnpm install
+```
 
-## Deploy on Vercel
+## Development
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+To start the development server, run the following command:
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+```bash
+pnpm dev
+```
+
+This will start the Next.js development server and open the application in your default browser.
+
+## Build
+
+To build the project for production, run the following command:
+
+```bash
+pnpm build
+```

components/emailForm.tsx

@@ -1,11 +1,9 @@
 'use client';
 import { useState } from 'react';
-import { createClient } from '@/utils/supabase/client';
-import Button from './button';
-
-const supabase = createClient();
+import useSupabaseBrowser from '@/lib/supabase-browser';
 
 export function EmailForm() {
+  const supabase = useSupabaseBrowser();
   const [email, setEmail] = useState('');
   const [formIsSubmitted, setFormIsSubmitted] = useState(false);
 
@@ -39,17 +37,17 @@ export function EmailForm() {
     <>
       {!formIsSubmitted ? (
         <form onSubmit={handleSubmit}>
-          <div className='items-center mx-auto mb-3 mt-8 space-y-4 max-w-screen-sm sm:flex sm:space-y-0 transition-all'>
+          <div className='mx-auto mb-3 mt-8 max-w-screen-sm items-center space-y-4 transition-all sm:flex sm:space-y-0'>
             <div className='relative w-full'>
               <label
                 htmlFor='email'
-                className='hidden mb-2 text-sm font-medium text-gray-900'
+                className='mb-2 hidden text-sm font-medium text-gray-900'
               >
                 Email address
               </label>
-              <div className='flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none'>
+              <div className='pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3'>
                 <svg
-                  className='w-5 h-5 text-gray-500'
+                  className='h-5 w-5 text-gray-500'
                   fill='currentColor'
                   viewBox='0 0 20 20'
                   xmlns='http://www.w3.org/2000/svg'
@@ -59,7 +57,7 @@ export function EmailForm() {
                 </svg>
               </div>
               <input
-                className='block p-3 pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500'
+                className='focus:ring-primary-500 focus:border-primary-500 block w-full rounded-lg border border-gray-300 bg-gray-50 p-3 pl-10 text-sm text-gray-900'
                 id='email'
                 placeholder={'Enter your email'}
                 type='email'
@@ -68,14 +66,14 @@ export function EmailForm() {
                 required
               />
             </div>
-            <div className='sm:w-80 flex m-0'>
-              <button className='sm:ml-2 py-3 px-5 w-full text-sm font-semibold text-center text-white rounded-lg border cursor-pointer bg-primary border-primary hover:bg-primary focus:ring-4 focus:ring-primary'>
+            <div className='m-0 flex sm:w-80'>
+              <button className='w-full cursor-pointer rounded-lg border border-primary bg-primary px-5 py-3 text-center text-sm font-semibold text-white hover:bg-primary focus:ring-4 focus:ring-primary sm:ml-2'>
                 Send me updates
               </button>
               {/* <Button label='Send me updates' /> */}
             </div>
           </div>
-          <div className='mx-auto max-w-screen-sm text-sm text-left text-gray-500 newsletter-form-footer'>
+          <div className='newsletter-form-footer mx-auto max-w-screen-sm text-left text-sm text-gray-500'>
             We&apos;ll never share your data or send you SPAM.
           </div>
         </form>
@@ -89,7 +87,7 @@ export function EmailForm() {
 function successState() {
   return (
     <>
-      <div className='mx-auto mb-3 mt-8 space-y-4 max-w-screen-sm sm:flex sm:space-y-0 text-gray-900 font-normal text-xl'>
+      <div className='mx-auto mb-3 mt-8 max-w-screen-sm space-y-4 text-xl font-normal text-gray-900 sm:flex sm:space-y-0'>
         Success! Thank you for subscribing! 🎉
       </div>
     </>