diff --git a/app/components/Conditionnal.tsx b/app/components/Conditionnal.tsx new file mode 100644 index 0000000..d46d0c1 --- /dev/null +++ b/app/components/Conditionnal.tsx @@ -0,0 +1,7 @@ + +const isLoggedIn = true; +const element = ( +
+ {isLoggedIn ?

Welcome back!

:

Please sign in.

} +
+); \ No newline at end of file diff --git a/app/components/Counter.tsx b/app/components/Counter.tsx new file mode 100644 index 0000000..4be2a57 --- /dev/null +++ b/app/components/Counter.tsx @@ -0,0 +1,17 @@ +// File: app/components/Counter.tsx +import { useState } from 'react'; + +function Counter() { + const [count, setCount] = useState(0); + + return ( +
+

You clicked {count} times

+ +
+ ); +} + +export default Counter; \ No newline at end of file diff --git a/app/components/CounterWithReducer.tsx b/app/components/CounterWithReducer.tsx new file mode 100644 index 0000000..5dd8634 --- /dev/null +++ b/app/components/CounterWithReducer.tsx @@ -0,0 +1,49 @@ +// File: app/components/CounterWithReducer.tsx +import { useReducer } from 'react'; + +type State = { + count: number; +}; + +type Action = + | { type: 'increment' } + | { type: 'decrement' }; + +const initialState: State = { count: 0 }; + +function reducer(state: State, action: Action): State { + switch (action.type) { + case 'increment': + return { count: state.count + 1 }; + case 'decrement': + return { count: state.count - 1 }; + default: + throw new Error('Unknown action type'); + } +} + +function CounterWithReducer() { + const [state, dispatch] = useReducer(reducer, initialState); + + return ( +
+

Count: {state.count}

+
+ + +
+
+ ); +} + +export default CounterWithReducer; \ No newline at end of file diff --git a/app/components/CurlyComponents.tsx b/app/components/CurlyComponents.tsx new file mode 100644 index 0000000..a3b5a7c --- /dev/null +++ b/app/components/CurlyComponents.tsx @@ -0,0 +1,20 @@ +const name = 'John'; +const element1 =

Hello, {name}!

; + +function formatName(user: { firstName: any; lastName: any; }) { + return user.firstName + ' ' + user.lastName; + } + + const user = { + firstName: 'John', + lastName: 'Doe' + }; + + const element2 =

Hello, {formatName(user)}!

; + + const isLoggedIn = true; + const element = ( +
+ {isLoggedIn ?

Welcome back!

:

Please sign in.

} +
+ ); \ No newline at end of file diff --git a/app/components/ExampleComponent.tsx b/app/components/ExampleComponent.tsx new file mode 100644 index 0000000..3efe8a4 --- /dev/null +++ b/app/components/ExampleComponent.tsx @@ -0,0 +1,17 @@ +// File: app/components/ExampleComponent.tsx +const ExampleComponent = () => { + const element = ( +
+

Hello, World!

+

Welcome to learning JSX with React.

+ +
+ ); + return element; + }; + + export default ExampleComponent; \ No newline at end of file diff --git a/app/components/Greetings.tsx b/app/components/Greetings.tsx new file mode 100644 index 0000000..c6eb46d --- /dev/null +++ b/app/components/Greetings.tsx @@ -0,0 +1,12 @@ +Greeting.defaultProps = { + name: 'Guest' +}; + +type GreetingProps = { + readonly name?: string; +}; + +export default function Greeting(props: GreetingProps) { + return

Hello, {props.name}

; + } + diff --git a/app/components/Loop.tsx b/app/components/Loop.tsx new file mode 100644 index 0000000..e69de29 diff --git a/app/components/MyClassComponent.tsx b/app/components/MyClassComponent.tsx new file mode 100644 index 0000000..fa0457c --- /dev/null +++ b/app/components/MyClassComponent.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +export default class MyComponent extends React.Component { + render() { + return
Hello, World From Class component !
; + } +} \ No newline at end of file diff --git a/app/components/MyComponent.tsx b/app/components/MyComponent.tsx new file mode 100644 index 0000000..77075c0 --- /dev/null +++ b/app/components/MyComponent.tsx @@ -0,0 +1,3 @@ +export default function MyComponent() { + return
Hello, World!
; + } \ No newline at end of file diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx new file mode 100644 index 0000000..46e2883 --- /dev/null +++ b/app/components/Navbar.tsx @@ -0,0 +1,59 @@ +// app/components/Navbar.tsx +import { Link } from "@remix-run/react"; +import { useState } from "react"; + +export default function Navbar() { + const [isOpen, setIsOpen] = useState(false); + const [isSubmenuOpen, setIsSubmenuOpen] = useState(false); + + return ( + + ); +} \ No newline at end of file diff --git a/app/components/ThemeContext.tsx b/app/components/ThemeContext.tsx new file mode 100644 index 0000000..1bfe09b --- /dev/null +++ b/app/components/ThemeContext.tsx @@ -0,0 +1,7 @@ +// File: app/components/ThemeContext.tsx +import { createContext } from 'react'; + +export const ThemeContext = createContext({ + background: 'darkblue', + color: 'white' +}); \ No newline at end of file diff --git a/app/components/ThemedButton.tsx b/app/components/ThemedButton.tsx new file mode 100644 index 0000000..39dcb15 --- /dev/null +++ b/app/components/ThemedButton.tsx @@ -0,0 +1,15 @@ +// File: app/components/ThemedButton.tsx +import { useContext } from 'react'; +import { ThemeContext } from './ThemeContext'; + +function ThemedButton() { + const theme = useContext(ThemeContext); + + return ( + + ); +} + +export default ThemedButton; \ No newline at end of file diff --git a/app/components/UseEffect.tsx b/app/components/UseEffect.tsx new file mode 100644 index 0000000..21c5695 --- /dev/null +++ b/app/components/UseEffect.tsx @@ -0,0 +1,9 @@ +import { useEffect } from 'react'; + +function Example() { + useEffect(() => { + document.title = 'Hello, World!'; + }, []); + + return
Hello, World!
; +} \ No newline at end of file diff --git a/app/dao/customer.dao.ts b/app/dao/customer.dao.ts new file mode 100644 index 0000000..1ded34b --- /dev/null +++ b/app/dao/customer.dao.ts @@ -0,0 +1,100 @@ +// app/dao/customer.dao.ts +import { pool } from '~/utils/db.server'; + +// Define a Customer type +// This interface represents the structure of a customer object in our database. +export interface Customer { + id: number; + name: string; + email: string; +} + +// Function to create a new customer +// This function takes a name and email as input, inserts a new customer into the database, +// and returns the newly created customer object. +export async function createCustomer(name: string, email: string): Promise { + try { + // Execute the SQL query to insert a new customer and return the inserted row. + const res = await pool.query( + 'INSERT INTO customers (name, email) VALUES ($1, $2) RETURNING *', + [name, email] + ); + // Return the first row of the result, which is the newly created customer. + return res.rows[0]; + } catch (error) { + // Log any errors that occur during the query execution. + console.error('Error creating customer:', error); + // Return null if an error occurs. + return null; + } +} + +// Function to get all customers +// This function retrieves all customers from the database and returns them as an array. +export async function getCustomers(): Promise { + try { + // Execute the SQL query to select all customers. + const res = await pool.query('SELECT * FROM customers'); + // Return the rows of the result, which are the customers. + return res.rows; + } catch (error) { + // Log any errors that occur during the query execution. + console.error('Error fetching customers:', error); + // Return an empty array if an error occurs. + return []; + } +} + +// Function to get a customer by ID +// This function takes a customer ID as input, retrieves the corresponding customer from the database, +// and returns the customer object. +export async function getCustomerById(id: number): Promise { + try { + // Execute the SQL query to select a customer by ID. + const res = await pool.query('SELECT * FROM customers WHERE id = $1', [id]); + // Return the first row of the result, or null if no customer is found. + return res.rows[0] || null; + } catch (error) { + // Log any errors that occur during the query execution. + console.error('Error fetching customer by ID:', error); + // Return null if an error occurs. + return null; + } +} + +// Function to update a customer +// This function takes a customer ID, name, and email as input, updates the corresponding customer in the database, +// and returns the updated customer object. +export async function updateCustomer(id: number, name: string, email: string): Promise { + try { + // Execute the SQL query to update a customer and return the updated row. + const res = await pool.query( + 'UPDATE customers SET name = $1, email = $2 WHERE id = $3 RETURNING *', + [name, email, id] + ); + // Return the first row of the result, which is the updated customer. + return res.rows[0]; + } catch (error) { + // Log any errors that occur during the query execution. + console.error('Error updating customer:', error); + // Return null if an error occurs. + return null; + } +} + +// Function to delete a customer +// This function takes a customer ID as input, deletes the corresponding customer from the database, +// and returns the deleted customer object. +export async function deleteCustomer(id: number): Promise { + try { + // Execute the SQL query to delete a customer and return the deleted row. + const res = await pool.query('DELETE FROM customers WHERE id = $1 RETURNING *', [id]); + // Return the first row of the result, which is the deleted customer. + return res.rows[0]; + } catch (error) { + // Log any errors that occur during the query execution. + console.error('Error deleting customer:', error); + // Return null if an error occurs. + return null; + } +} \ No newline at end of file diff --git a/app/root.tsx b/app/root.tsx index 426fac3..a2153f7 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -13,30 +13,57 @@ import { import { getUser } from "~/session.server"; import stylesheet from "~/tailwind.css"; +// Function to define the links to stylesheets export const links: LinksFunction = () => [ { rel: "stylesheet", href: stylesheet }, ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []), ]; +// Loader function to fetch user data on the server side export const loader = async ({ request }: LoaderFunctionArgs) => { return json({ user: await getUser(request) }); }; +// Main App component export default function App() { return ( + {/* Meta tags for SEO */} + {/* Links to stylesheets */} + {/* Outlet for nested routes */} + {/* Scroll restoration for maintaining scroll position */} + {/* Scripts for the application */} + {/* Live reload for development */} ); } + +/* +Explanation for Students: + +1. Import Statements: Import necessary modules and components from Remix and other files. +2. Links Function: Defines the links to stylesheets. It includes the Tailwind CSS stylesheet and optionally a CSS bundle if available. +3. Loader Function: Fetches user data on the server side using the `getUser` function. This data is passed to the component as JSON. +4. App Component: The main component that defines the structure of the HTML document. + - ``: The root element with the language set to English and full height. + - ``: Contains meta tags for character set and viewport settings, as well as links to stylesheets. + - ``: Contains the main content of the application. + - ``: A placeholder for nested routes. + - ``: Ensures the scroll position is maintained when navigating. + - ``: Includes the necessary scripts for the application. + - ``: Enables live reloading during development. + +This structure provides a clean and organized layout for the root of the application, with support for stylesheets, user data fetching, and essential HTML elements. +*/ \ No newline at end of file diff --git a/app/routes/HelloRoute.tsx b/app/routes/HelloRoute.tsx new file mode 100644 index 0000000..1f326ca --- /dev/null +++ b/app/routes/HelloRoute.tsx @@ -0,0 +1,30 @@ +// File: app/routes/HelloRoute.tsx +import MyComponent from '~/components/MyComponent'; +import MyClassComponent from '~/components/MyClassComponent'; +import ExampleComponent from '~/components/ExampleComponent'; +import Greetings from '~/components/Greetings'; +import Counter from '~/components/Counter'; +import ThemedButton from '~/components/ThemedButton'; +import CounterWithReducer from '~/components/CounterWithReducer'; + + +export default function HelloRoute() { + return ( +
+

Welcome to Remix

+ + + + + + + + + + + + + +
+ ); +} \ No newline at end of file diff --git a/app/routes/Search.tsx b/app/routes/Search.tsx new file mode 100644 index 0000000..c7ab031 --- /dev/null +++ b/app/routes/Search.tsx @@ -0,0 +1,46 @@ +import { useFetcher } from "@remix-run/react"; +import { json } from "@remix-run/node"; +import type { LoaderFunction } from "@remix-run/node"; + +// Loader function to handle search queries +export const loader: LoaderFunction = async ({ request }) => { + const url = new URL(request.url); + const query = url.searchParams.get("query"); + + // Return an empty array if no query is provided + if (!query) { + return json([]); + } + + // Simulate a search operation (replace with actual search logic) + const results = [ + { name: "Result 1" }, + { name: "Result 2" }, + { name: "Result 3" }, + ].filter(result => result.name.toLowerCase().includes(query.toLowerCase())); + + return json(results); +}; + +// SearchPage component +export default function SearchPage() { + const fetcher = useFetcher(); + const results = fetcher.data || []; + + return ( +
+

Search Page

+ {/* Form to submit search query */} + + + + + {/* Display search results */} +
    + {results.map((result: any, index: number) => ( +
  • {result.name}
    • + ))} +
+
+ ); +} \ No newline at end of file diff --git a/app/routes/contact.tsx b/app/routes/contact.tsx new file mode 100644 index 0000000..66ce4f5 --- /dev/null +++ b/app/routes/contact.tsx @@ -0,0 +1,24 @@ +// app/routes/contact.tsx +import { Form } from '@remix-run/react'; +import { redirect, ActionFunction } from '@remix-run/node'; + +export default function Contact() { + return ( +
+ + +
+ ); +} + +export let action: ActionFunction = async ({ request }) => { + const formData = await request.formData(); + const name = formData.get("name"); + + // Process the form data (e.g., save to database) + console.log("Name: "+name); + + return redirect("/thank-you"); +}; \ No newline at end of file diff --git a/app/routes/customers.tsx b/app/routes/customers.tsx new file mode 100644 index 0000000..bcb8f1a --- /dev/null +++ b/app/routes/customers.tsx @@ -0,0 +1,112 @@ +// app/routes/customers.tsx +import { json, LoaderFunction, ActionFunction } from '@remix-run/node'; +import { useLoaderData, Form, useActionData } from '@remix-run/react'; +import { getCustomers, createCustomer, Customer } from '~/dao/customer.dao'; +import { useState } from 'react'; + +import Navbar from "~/components/Navbar"; + +// Loader function to fetch customers from the database +export const loader: LoaderFunction = async () => { + const customers = await getCustomers(); + return json(customers); +}; + +// Action function to handle form submission for creating a new customer +export const action: ActionFunction = async ({ request }) => { + const formData = await request.formData(); + const name = formData.get('name') as string; + const email = formData.get('email') as string; + + // Validate form data + if (!name || !email) { + return json({ error: 'Name and email are required' }, { status: 400 }); + } + + // Create a new customer in the database + const newCustomer = await createCustomer(name, email); + return json(newCustomer); +}; + +// React component to display and manage customers +export default function Customers() { + // Fetch the list of customers from the loader function + const customers = useLoaderData(); + // Fetch any errors returned by the action function + const actionData = useActionData<{ error?: string }>(); + // State variables for form inputs and errors + const [name, setName] = useState(''); + const [email, setEmail] = useState(''); + const [errors, setErrors] = useState<{ name?: string; email?: string }>({}); + + // Function to validate the form inputs + const validateForm = () => { + const newErrors: { name?: string; email?: string } = {}; + if (!name) newErrors.name = 'Name is required'; + if (!email) newErrors.email = 'Email is required'; + setErrors(newErrors); + return Object.keys(newErrors).length === 0; + }; + + // Handle form submission + const handleSubmit = (event: React.FormEvent) => { + // Prevent form submission if validation fails + if (!validateForm()) { + event.preventDefault(); + } + }; + + return ( +
+ +
+

Customers

+ + {/* Form to add a new customer */} +
+
+ + setName(e.target.value)} + className="w-full p-2 border border-gray-300 rounded" + /> + {/* Display validation error for name */} + {errors.name &&
{errors.name}
} +
+
+ + setEmail(e.target.value)} + className="w-full p-2 border border-gray-300 rounded" + /> + {/* Display validation error for email */} + {errors.email &&
{errors.email}
} +
+ {/* Display server-side error */} + {actionData?.error && ( +
{actionData.error}
+ )} + +
+ + {/* Display the list of customers as cards */} +
+ {customers.map((customer) => ( +
+

{customer.name}

+

{customer.email}

+
+ ))} +
+
+
+ ); +} \ No newline at end of file diff --git a/app/routes/dashboard.index.tsx b/app/routes/dashboard.index.tsx new file mode 100644 index 0000000..eb3e256 --- /dev/null +++ b/app/routes/dashboard.index.tsx @@ -0,0 +1,14 @@ +// app/routes/dashboard.index.tsx + +// This is the main component for the Dashboard index page. +// It displays a welcome message and some introductory text. +export default function DashboardIndex() { + return ( +
+ {/* Heading for the dashboard */} +

Welcome to the Dashboard

+ {/* Introductory text for the dashboard */} +

This is the main dashboard page.

+
+ ); +} \ No newline at end of file diff --git a/app/routes/dashboard.settings.tsx b/app/routes/dashboard.settings.tsx new file mode 100644 index 0000000..b749e0b --- /dev/null +++ b/app/routes/dashboard.settings.tsx @@ -0,0 +1,14 @@ +// app/routes/dashboard.settings.tsx + +// This is the main component for the Dashboard settings page. +// It displays a heading and some introductory text for managing settings. +export default function DashboardSettings() { + return ( +
+ {/* Heading for the settings page */} +

Settings

+ {/* Introductory text for the settings page */} +

Manage your settings here.

+
+ ); +} \ No newline at end of file diff --git a/app/routes/dashboard.tsx b/app/routes/dashboard.tsx new file mode 100644 index 0000000..209010a --- /dev/null +++ b/app/routes/dashboard.tsx @@ -0,0 +1,45 @@ +// app/routes/dashboard.tsx + +import { Outlet } from "@remix-run/react"; +import Navbar from "~/components/Navbar"; + +// This is the main component for the Dashboard layout. +// It includes a Navbar, a heading, and a placeholder for nested routes. +export default function Dashboard() { + return ( +
+ {/* Navbar component */} + +
+ {/* Main heading for the dashboard */} +

Dashboard

+ {/* Outlet for nested routes */} + +
+
+ ); +} + +/* +Explanation for Students: + +1. Component Definition: The `Dashboard` function is a React component that represents the layout for the dashboard. +2. Container Div: The outer `div` has a minimum height of the screen (`min-h-screen`) and a gray background (`bg-gray-100`). These classes are from Tailwind CSS and help style the container. +3. Navbar Component: The `Navbar` component is included to provide navigation links. +4. Inner Container: The inner `div` centers the content and adds padding (`p-4`). It uses Tailwind CSS classes for layout and spacing. +5. Main Heading: The `h1` element displays the main heading of the dashboard. It uses Tailwind CSS classes for text size (`text-4xl`), font weight (`font-bold`), and margin bottom (`mb-4`). +6. Outlet Component: The `Outlet` component from `@remix-run/react` is used to render nested routes. This allows different pages (like the dashboard index and settings) to be displayed within the dashboard layout. + +Nested Routes: +- Index Route: By default, the `index` route will be rendered when the user navigates to `/dashboard`. This is typically used to display an overview or welcome message. + - File: `app/routes/dashboard/index.tsx` + - Component: `DashboardIndex` + - Content: Displays a welcome message and introductory text. + +- Settings Route: The `settings` route will be rendered when the user navigates to `/dashboard/settings`. This is used to display and manage settings. + - File: `app/routes/dashboard/settings.tsx` + - Component: `DashboardSettings` + - Content: Displays a heading and introductory text for managing settings. + +This structure provides a clean and organized layout for the dashboard, with a consistent header and space for nested content. The `Outlet` component ensures that the appropriate nested route content is displayed based on the current URL. +*/ \ No newline at end of file diff --git a/app/routes/dynamicProducts.tsx b/app/routes/dynamicProducts.tsx new file mode 100644 index 0000000..887d6fe --- /dev/null +++ b/app/routes/dynamicProducts.tsx @@ -0,0 +1,65 @@ +// app/routes/dynamicProducts.tsx +import { useLoaderData } from "@remix-run/react"; +import { json } from "@remix-run/node"; + +// Define a Product type +// This interface represents the structure of a product object. +interface Product { + id: number; + name: string; + price: string; +} + +// Simulate fetching data from a database or API +// This function returns a list of products. +const fetchProducts = async (): Promise => { + return [ + { id: 1, name: "Product 1", price: "$10" }, + { id: 2, name: "Product 2", price: "$20" }, + { id: 3, name: "Product 3", price: "$30" }, + ]; +}; + +// Loader function to fetch data on the server side +// This function fetches the products and returns them as JSON. +export const loader = async () => { + const products = await fetchProducts(); + return json({ products }); +}; + +// React component to display the products +// This component uses the useLoaderData hook to get the products and displays them in a list. +export default function Products() { + const { products } = useLoaderData<{ products: Product[] }>(); + + return ( +
+ {/* Heading for the products page */} +

Products

+ {/* List of products */} +
    + {products.map((product) => ( +
  • + {product.name} - {product.price} +
    • + ))} +
+
+ ); +} + +/* +Explanation for Students: + +1. Product Interface: Defines the structure of a product object with `id`, `name`, and `price` properties. +2. fetchProducts Function: Simulates fetching data from a database or API and returns a list of products. +3. Loader Function: Fetches the products on the server side and returns them as JSON. This function runs before the component is rendered. +4. Products Component: + - Uses the `useLoaderData` hook to get the products fetched by the loader function. + - Displays the products in a list. + - The `div` container centers the content and adds styling using Tailwind CSS classes. + - The `h1` element displays the main heading of the products page. + - The `ul` element displays the list of products, with each product rendered as a `li` element. + +This structure ensures that the data is fetched on the server side and passed to the component, providing a seamless user experience. +*/ diff --git a/app/routes/fakerestproduct.tsx b/app/routes/fakerestproduct.tsx new file mode 100644 index 0000000..cacaec7 --- /dev/null +++ b/app/routes/fakerestproduct.tsx @@ -0,0 +1,24 @@ +// File: app/routes/fakerestproducts.tsx +import { useLoaderData } from "@remix-run/react"; + +export const loader = async () => { + const response = await fetch("https://fakestoreapi.com/products"); + const products = await response.json(); + return { products }; +}; + +export default function FakeRestProducts() { + const { products } = useLoaderData<{ products: { id: number; title: string }[] }>(); + return ( +
+

Products

+
    + {products.map(product => ( +
  • + {product.title} +
    • + ))} +
+
+ ); +} \ No newline at end of file diff --git a/app/routes/products.$productId.tsx b/app/routes/products.$productId.tsx new file mode 100644 index 0000000..ebc8556 --- /dev/null +++ b/app/routes/products.$productId.tsx @@ -0,0 +1,58 @@ +// app/routes/products.$productId.tsx +import { useLoaderData } from '@remix-run/react'; +import { json, LoaderFunctionArgs } from '@remix-run/node'; + +// Simulate fetching product details from a database or API +const fetchProductById = async (id: string) => { + const products = [ + { id: '1', name: 'Wireless Headphones', price: '€99.99', description: 'High-quality wireless headphones with noise cancellation.' }, + { id: '2', name: 'Smartwatch', price: '€199.99', description: 'Modern smartwatch with various health tracking features.' }, + { id: '3', name: 'Bluetooth Speaker', price: '€49.99', description: 'Portable Bluetooth speaker with excellent sound quality.' }, + { id: '4', name: 'Gaming Mouse', price: '€59.99', description: 'Ergonomic gaming mouse with customizable buttons.' }, + ]; + return products.find(product => product.id === id); +}; + +// Loader function to fetch product details on the server side +export const loader = async ({ params }: LoaderFunctionArgs) => { + if (!params.productId) { + throw new Response('Product ID is required', { status: 400 }); + } + const product = await fetchProductById(params.productId); + if (!product) { + throw new Response('Product Not Found', { status: 404 }); + } + return json(product); +}; + +// Main component to display product details +export default function Product() { + const product = useLoaderData(); + + return ( +
+ {/* Heading for the product name */} +

{product.name}

+ {/* Product price */} +

{product.price}

+ {/* Product description */} +

{product.description}

+
+ ); +} + +/* +Explanation for Students: + +1. Import Statements: Import necessary modules and components from Remix and other files. +2. fetchProductById Function: Simulates fetching product details from a database or API based on the product ID. +3. Loader Function: Fetches product details on the server side using the `fetchProductById` function. If the product is not found, it throws a 404 error. +4. Product Component: The main component that displays the product details. + - `useLoaderData`: Retrieves the product data fetched by the loader function. + - Container Div: The outer `div` uses Tailwind CSS classes to style the container with padding (`p-4`), a white background (`bg-white`), shadow (`shadow-md`), and rounded corners (`rounded-md`). + - Heading: The `h2` element displays the product name with Tailwind CSS classes for text size (`text-2xl`), font weight (`font-semibold`), and margin bottom (`mb-2`). + - Price: The `p` element displays the product price with Tailwind CSS classes for text color (`text-gray-700`) and margin bottom (`mb-2`). + - Description: The `p` element displays the product description with Tailwind CSS classes for text color (`text-gray-700`). + +This structure provides a clean and organized layout for displaying product details, with data fetched on the server side and passed to the component. +*/ \ No newline at end of file diff --git a/app/routes/products.tsx b/app/routes/products.tsx new file mode 100644 index 0000000..2a22567 --- /dev/null +++ b/app/routes/products.tsx @@ -0,0 +1,68 @@ +// app/routes/products.tsx +import Navbar from "~/components/Navbar"; + +export default function Products() { + return ( +
+ +
+

Products Page

+

Details about the products will go here.

+ + {/* Products grid */} +
+ {/* Product 1 */} +
+ Wireless Headphones +
+

Wireless Headphones

+

€99.99

+
+
+ + {/* Product 2 */} +
+ Smartwatch +
+

Smartwatch

+

€199.99

+
+
+ + {/* Product 3 */} +
+ Bluetooth Speaker +
+

Bluetooth Speaker

+

€49.99

+
+
+ + {/* Product 4 */} +
+ Gaming Mouse +
+

Gaming Mouse

+

€59.99

+
+
+
+
+
+ ); +} + +/* +Explanation for Students: + +1. Component Definition: The `Products` function is a React component that represents the products page. +2. Container Div: The outer `div` has a minimum height of the screen (`min-h-screen`) and a gray background (`bg-gray-100`). These classes are from Tailwind CSS and help style the container. +3. Navbar Component: The `Navbar` component is included to provide navigation links. +4. Inner Container: The inner `div` centers the content and adds padding (`p-4`). It uses Tailwind CSS classes for layout and spacing. +5. Main Heading: The `h1` element displays the main heading of the products page. It uses Tailwind CSS classes for text size (`text-3xl`), font weight (`font-bold`), and margin bottom (`mb-4`). +6. Introductory Text: The `p` element provides some introductory text for the products page. It uses Tailwind CSS classes for text size (`text-lg`) and text color (`text-gray-700`). +7. Products Grid: The `div` with `grid` classes creates a responsive grid layout for the products. It uses Tailwind CSS classes to define the grid columns and gaps. +8. Product Cards: Each product is displayed in a card with a white background (`bg-white`), shadow (`shadow-md`), and rounded corners (`rounded-lg`). The product image, name, and price are styled using Tailwind CSS classes. The placeholder images are used for demonstration purposes and are sourced from Freepik. The prices are displayed in euros (€). + +This structure provides a clean and organized layout for the products page, with a consistent header and space for displaying products in a responsive grid. +*/ \ No newline at end of file diff --git a/app/routes/productwithParam.$productId.tsx b/app/routes/productwithParam.$productId.tsx new file mode 100644 index 0000000..5f36261 --- /dev/null +++ b/app/routes/productwithParam.$productId.tsx @@ -0,0 +1,11 @@ +// File: app/routes/ProductWithParam.tsx +import { useParams } from "@remix-run/react"; + +export default function Product() { + const { productId } = useParams(); + return ( +
+

Product ID: {productId}

+
+ ); +} \ No newline at end of file diff --git a/app/routes/thank-you.tsx b/app/routes/thank-you.tsx new file mode 100644 index 0000000..719e5f6 --- /dev/null +++ b/app/routes/thank-you.tsx @@ -0,0 +1,7 @@ +export default function ThankYou() { + return ( +
+

Thank you

+
+ ); +} diff --git a/app/routes/welcome.tsx b/app/routes/welcome.tsx new file mode 100644 index 0000000..3c76468 --- /dev/null +++ b/app/routes/welcome.tsx @@ -0,0 +1,25 @@ +// app/routes/welcome.tsx + +// This is the main component for the Welcome page. +// It displays a welcome message and some introductory text. +export default function Welcome() { + return ( +
+ {/* Heading for the welcome message */} +

Hello, World!

+ {/* Introductory text for the welcome message */} +

Welcome to our website. We're glad to have you here!

+
+ ); +} + +/* +Explanation for Students: + +1. Component Definition: The `Welcome` function is a React component that represents the welcome page. +2. Container Div: The outer `div` uses Tailwind CSS classes to create a flex container (`flex`) that centers its content both vertically and horizontally (`items-center justify-center`). It also has a full-screen height (`h-screen`), a gray background (`bg-gray-100`), and gray text (`text-gray-800`). +3. Heading: The `h1` element displays the main heading of the welcome page. It uses Tailwind CSS classes for text size (`text-4xl`), font weight (`font-bold`), and margin bottom (`mb-4`). +4. Introductory Text: The `p` element provides some introductory text for the welcome page. It uses Tailwind CSS classes for text size (`text-xl`) and margin top (`mt-2`). + +This structure provides a clean and welcoming interface for the welcome page, with a consistent layout and styling. +*/ \ No newline at end of file diff --git a/app/utils/db.server.ts b/app/utils/db.server.ts new file mode 100644 index 0000000..ebb8e93 --- /dev/null +++ b/app/utils/db.server.ts @@ -0,0 +1,23 @@ +// app/utils/db.server.ts + +// Import the Pool class from the 'pg' (node-postgres) library +import { Pool } from 'pg'; + +// Create a new pool instance to manage connections to the PostgreSQL database +// The connection string is retrieved from the environment variables +const pool = new Pool({ + connectionString: process.env.DATABASE_URL, +}); + +// Export the pool instance so it can be used in other parts of the application +export { pool }; + +/* +Explanation for Students: + +1. Importing the Pool Class: The `Pool` class is imported from the 'pg' library. This class is used to manage a pool of connections to the PostgreSQL database. +2. Creating a Pool Instance: A new instance of the `Pool` class is created. The `connectionString` property is set to the value of the `DATABASE_URL` environment variable. This URL contains the necessary information to connect to the database (e.g., username, password, host, port, and database name). +3. Exporting the Pool Instance: The `pool` instance is exported so that it can be imported and used in other parts of the application to interact with the database. + +This setup allows the application to efficiently manage database connections and perform queries using the `pool` instance. +*/ \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 57c5ebb..87db5d0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,17 +1,20 @@ { - "name": "my-app", + "name": "my-app-8ed5", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "my-app", + "name": "my-app-8ed5", "dependencies": { + "@headlessui/react": "^2.2.0", + "@heroicons/react": "^2.1.5", "@isaacs/express-prometheus-middleware": "^1.2.1", "@prisma/client": "^5.20.0", "@remix-run/css-bundle": "^2.13.1", "@remix-run/express": "^2.13.1", "@remix-run/node": "^2.13.1", "@remix-run/react": "^2.13.1", + "@types/pg": "^8.11.10", "bcryptjs": "^2.4.3", "chokidar": "^3.6.0", "compression": "^1.7.4", @@ -19,6 +22,7 @@ "express": "^4.21.0", "isbot": "^5.1.17", "morgan": "^1.10.0", + "pg": "^8.13.1", "prom-client": "^15.1.3", "react": "^18.3.1", "react-dom": "^18.3.1", @@ -1327,6 +1331,59 @@ "npm": ">=9.0.0" } }, + "node_modules/@floating-ui/core": { + "version": "1.6.8", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz", + "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==", + "license": "MIT", + "dependencies": { + "@floating-ui/utils": "^0.2.8" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.6.12", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.12.tgz", + "integrity": "sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==", + "license": "MIT", + "dependencies": { + "@floating-ui/core": "^1.6.0", + "@floating-ui/utils": "^0.2.8" + } + }, + "node_modules/@floating-ui/react": { + "version": "0.26.26", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.26.tgz", + "integrity": "sha512-iv2BjdcyoF1j1708Z9CrGtMc9ZZvMPZnDqyB1FrSWYCi+/nlPArUO/u9QhwC4E1Pi4T0g18GZ4W702m0NDh9bw==", + "license": "MIT", + "dependencies": { + "@floating-ui/react-dom": "^2.1.2", + "@floating-ui/utils": "^0.2.8", + "tabbable": "^6.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/react-dom": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz", + "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==", + "license": "MIT", + "dependencies": { + "@floating-ui/dom": "^1.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.8", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz", + "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==", + "license": "MIT" + }, "node_modules/@hapi/hoek": { "version": "9.3.0", "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz", @@ -1344,6 +1401,34 @@ "@hapi/hoek": "^9.0.0" } }, + "node_modules/@headlessui/react": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.2.0.tgz", + "integrity": "sha512-RzCEg+LXsuI7mHiSomsu/gBJSjpupm6A1qIZ5sWjd7JhARNlMiSA4kKfJpCKwU9tE+zMRterhhrP74PvfJrpXQ==", + "license": "MIT", + "dependencies": { + "@floating-ui/react": "^0.26.16", + "@react-aria/focus": "^3.17.1", + "@react-aria/interactions": "^3.21.3", + "@tanstack/react-virtual": "^3.8.1" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "^18 || ^19 || ^19.0.0-rc", + "react-dom": "^18 || ^19 || ^19.0.0-rc" + } + }, + "node_modules/@heroicons/react": { + "version": "2.1.5", + "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.1.5.tgz", + "integrity": "sha512-FuzFN+BsHa+7OxbvAERtgBTNeZpUjgM/MIizfVkSCL2/edriN0Hx/DWRCR//aPYwO5QX/YlgLGXk+E3PcfZwjA==", + "license": "MIT", + "peerDependencies": { + "react": ">= 16" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.13.0", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz", @@ -1928,6 +2013,89 @@ "@prisma/debug": "5.21.1" } }, + "node_modules/@react-aria/focus": { + "version": "3.18.4", + "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.18.4.tgz", + "integrity": "sha512-91J35077w9UNaMK1cpMUEFRkNNz0uZjnSwiyBCFuRdaVuivO53wNC9XtWSDNDdcO5cGy87vfJRVAiyoCn/mjqA==", + "license": "Apache-2.0", + "dependencies": { + "@react-aria/interactions": "^3.22.4", + "@react-aria/utils": "^3.25.3", + "@react-types/shared": "^3.25.0", + "@swc/helpers": "^0.5.0", + "clsx": "^2.0.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0" + } + }, + "node_modules/@react-aria/interactions": { + "version": "3.22.4", + "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.22.4.tgz", + "integrity": "sha512-E0vsgtpItmknq/MJELqYJwib+YN18Qag8nroqwjk1qOnBa9ROIkUhWJerLi1qs5diXq9LHKehZDXRlwPvdEFww==", + "license": "Apache-2.0", + "dependencies": { + "@react-aria/ssr": "^3.9.6", + "@react-aria/utils": "^3.25.3", + "@react-types/shared": "^3.25.0", + "@swc/helpers": "^0.5.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0" + } + }, + "node_modules/@react-aria/ssr": { + "version": "3.9.6", + "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.6.tgz", + "integrity": "sha512-iLo82l82ilMiVGy342SELjshuWottlb5+VefO3jOQqQRNYnJBFpUSadswDPbRimSgJUZuFwIEYs6AabkP038fA==", + "license": "Apache-2.0", + "dependencies": { + "@swc/helpers": "^0.5.0" + }, + "engines": { + "node": ">= 12" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0" + } + }, + "node_modules/@react-aria/utils": { + "version": "3.25.3", + "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.25.3.tgz", + "integrity": "sha512-PR5H/2vaD8fSq0H/UB9inNbc8KDcVmW6fYAfSWkkn+OAdhTTMVKqXXrZuZBWyFfSD5Ze7VN6acr4hrOQm2bmrA==", + "license": "Apache-2.0", + "dependencies": { + "@react-aria/ssr": "^3.9.6", + "@react-stately/utils": "^3.10.4", + "@react-types/shared": "^3.25.0", + "@swc/helpers": "^0.5.0", + "clsx": "^2.0.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0" + } + }, + "node_modules/@react-stately/utils": { + "version": "3.10.4", + "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.4.tgz", + "integrity": "sha512-gBEQEIMRh5f60KCm7QKQ2WfvhB2gLUr9b72sqUdIZ2EG+xuPgaIlCBeSicvjmjBvYZwOjoOEnmIkcx2GHp/HWw==", + "license": "Apache-2.0", + "dependencies": { + "@swc/helpers": "^0.5.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0" + } + }, + "node_modules/@react-types/shared": { + "version": "3.25.0", + "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.25.0.tgz", + "integrity": "sha512-OZSyhzU6vTdW3eV/mz5i6hQwQUhkRs7xwY2d1aqPvTdMe0+2cY7Fwp45PAiwYLEj73i9ro2FxF9qC4DvHGSCgQ==", + "license": "Apache-2.0", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/@remix-run/css-bundle": { "version": "2.13.1", "resolved": "https://registry.npmjs.org/@remix-run/css-bundle/-/css-bundle-2.13.1.tgz", @@ -2901,6 +3069,42 @@ "dev": true, "license": "BSD-3-Clause" }, + "node_modules/@swc/helpers": { + "version": "0.5.13", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.13.tgz", + "integrity": "sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w==", + "license": "Apache-2.0", + "dependencies": { + "tslib": "^2.4.0" + } + }, + "node_modules/@tanstack/react-virtual": { + "version": "3.10.8", + "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.10.8.tgz", + "integrity": "sha512-VbzbVGSsZlQktyLrP5nxE+vE1ZR+U0NFAWPbJLoG2+DKPwd2D7dVICTVIIaYlJqX1ZCEnYDbaOpmMwbsyhBoIA==", + "license": "MIT", + "dependencies": { + "@tanstack/virtual-core": "3.10.8" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@tanstack/virtual-core": { + "version": "3.10.8", + "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.10.8.tgz", + "integrity": "sha512-PBu00mtt95jbKFi6Llk9aik8bnR3tR/oQP1o3TSi+iG//+Q2RTIzCEgKkHG8BB86kxMNW6O8wku+Lmi+QFR6jA==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, "node_modules/@testing-library/cypress": { "version": "10.0.2", "resolved": "https://registry.npmjs.org/@testing-library/cypress/-/cypress-10.0.2.tgz", @@ -3227,12 +3431,22 @@ "version": "20.17.4", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.4.tgz", "integrity": "sha512-Fi1Bj8qTJr4f1FDdHFR7oMlOawEYSzkHNdBJK+aRjcDDNHwEV3jPPjuZP2Lh2QNgXeqzM8Y+U6b6urKAog2rZw==", - "dev": true, "license": "MIT", "dependencies": { "undici-types": "~6.19.2" } }, + "node_modules/@types/pg": { + "version": "8.11.10", + "resolved": "https://registry.npmjs.org/@types/pg/-/pg-8.11.10.tgz", + "integrity": "sha512-LczQUW4dbOQzsH2RQ5qoeJ6qJPdrcM/DcMLoqWQkMLMsq83J5lAX3LXjdkWdpscFy67JSOWDnh7Ny/sPFykmkg==", + "license": "MIT", + "dependencies": { + "@types/node": "*", + "pg-protocol": "*", + "pg-types": "^4.0.1" + } + }, "node_modules/@types/prop-types": { "version": "15.7.13", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz", @@ -5483,6 +5697,15 @@ "node": ">=0.8" } }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -12308,6 +12531,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/obuf": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz", + "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==", + "license": "MIT" + }, "node_modules/on-finished": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz", @@ -12686,6 +12915,161 @@ "is-reference": "^3.0.0" } }, + "node_modules/pg": { + "version": "8.13.1", + "resolved": "https://registry.npmjs.org/pg/-/pg-8.13.1.tgz", + "integrity": "sha512-OUir1A0rPNZlX//c7ksiu7crsGZTKSOXJPgtNiHGIlC9H0lO+NC6ZDYksSgBYY/thSWhnSRBv8w1lieNNGATNQ==", + "license": "MIT", + "dependencies": { + "pg-connection-string": "^2.7.0", + "pg-pool": "^3.7.0", + "pg-protocol": "^1.7.0", + "pg-types": "^2.1.0", + "pgpass": "1.x" + }, + "engines": { + "node": ">= 8.0.0" + }, + "optionalDependencies": { + "pg-cloudflare": "^1.1.1" + }, + "peerDependencies": { + "pg-native": ">=3.0.1" + }, + "peerDependenciesMeta": { + "pg-native": { + "optional": true + } + } + }, + "node_modules/pg-cloudflare": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/pg-cloudflare/-/pg-cloudflare-1.1.1.tgz", + "integrity": "sha512-xWPagP/4B6BgFO+EKz3JONXv3YDgvkbVrGw2mTo3D6tVDQRh1e7cqVGvyR3BE+eQgAvx1XhW/iEASj4/jCWl3Q==", + "license": "MIT", + "optional": true + }, + "node_modules/pg-connection-string": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.7.0.tgz", + "integrity": "sha512-PI2W9mv53rXJQEOb8xNR8lH7Hr+EKa6oJa38zsK0S/ky2er16ios1wLKhZyxzD7jUReiWokc9WK5nxSnC7W1TA==", + "license": "MIT" + }, + "node_modules/pg-int8": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/pg-int8/-/pg-int8-1.0.1.tgz", + "integrity": "sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw==", + "license": "ISC", + "engines": { + "node": ">=4.0.0" + } + }, + "node_modules/pg-numeric": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/pg-numeric/-/pg-numeric-1.0.2.tgz", + "integrity": "sha512-BM/Thnrw5jm2kKLE5uJkXqqExRUY/toLHda65XgFTBTFYZyopbKjBe29Ii3RbkvlsMoFwD+tHeGaCjjv0gHlyw==", + "license": "ISC", + "engines": { + "node": ">=4" + } + }, + "node_modules/pg-pool": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/pg-pool/-/pg-pool-3.7.0.tgz", + "integrity": "sha512-ZOBQForurqh4zZWjrgSwwAtzJ7QiRX0ovFkZr2klsen3Nm0aoh33Ls0fzfv3imeH/nw/O27cjdz5kzYJfeGp/g==", + "license": "MIT", + "peerDependencies": { + "pg": ">=8.0" + } + }, + "node_modules/pg-protocol": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/pg-protocol/-/pg-protocol-1.7.0.tgz", + "integrity": "sha512-hTK/mE36i8fDDhgDFjy6xNOG+LCorxLG3WO17tku+ij6sVHXh1jQUJ8hYAnRhNla4QVD2H8er/FOjc/+EgC6yQ==", + "license": "MIT" + }, + "node_modules/pg-types": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/pg-types/-/pg-types-4.0.2.tgz", + "integrity": "sha512-cRL3JpS3lKMGsKaWndugWQoLOCoP+Cic8oseVcbr0qhPzYD5DWXK+RZ9LY9wxRf7RQia4SCwQlXk0q6FCPrVng==", + "license": "MIT", + "dependencies": { + "pg-int8": "1.0.1", + "pg-numeric": "1.0.2", + "postgres-array": "~3.0.1", + "postgres-bytea": "~3.0.0", + "postgres-date": "~2.1.0", + "postgres-interval": "^3.0.0", + "postgres-range": "^1.1.1" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/pg/node_modules/pg-types": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/pg-types/-/pg-types-2.2.0.tgz", + "integrity": "sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==", + "license": "MIT", + "dependencies": { + "pg-int8": "1.0.1", + "postgres-array": "~2.0.0", + "postgres-bytea": "~1.0.0", + "postgres-date": "~1.0.4", + "postgres-interval": "^1.1.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/pg/node_modules/postgres-array": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz", + "integrity": "sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==", + "license": "MIT", + "engines": { + "node": ">=4" + } + }, + "node_modules/pg/node_modules/postgres-bytea": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/postgres-bytea/-/postgres-bytea-1.0.0.tgz", + "integrity": "sha512-xy3pmLuQqRBZBXDULy7KbaitYqLcmxigw14Q5sj8QBVLqEwXfeybIKVWiqAXTlcvdvb0+xkOtDbfQMOf4lST1w==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/pg/node_modules/postgres-date": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/postgres-date/-/postgres-date-1.0.7.tgz", + "integrity": "sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/pg/node_modules/postgres-interval": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/postgres-interval/-/postgres-interval-1.2.0.tgz", + "integrity": "sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==", + "license": "MIT", + "dependencies": { + "xtend": "^4.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/pgpass": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/pgpass/-/pgpass-1.0.5.tgz", + "integrity": "sha512-FdW9r/jQZhSeohs1Z3sI1yxFQNFvMcnmfuj4WBMUTxOrAyLMaTcE1aAMBiTlbMNaXvBCQuVi0R7hd8udDSP7ug==", + "license": "MIT", + "dependencies": { + "split2": "^4.1.0" + } + }, "node_modules/picocolors": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", @@ -13005,6 +13389,51 @@ "dev": true, "license": "MIT" }, + "node_modules/postgres-array": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-3.0.2.tgz", + "integrity": "sha512-6faShkdFugNQCLwucjPcY5ARoW1SlbnrZjmGl0IrrqewpvxvhSLHimCVzqeuULCbG0fQv7Dtk1yDbG3xv7Veog==", + "license": "MIT", + "engines": { + "node": ">=12" + } + }, + "node_modules/postgres-bytea": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/postgres-bytea/-/postgres-bytea-3.0.0.tgz", + "integrity": "sha512-CNd4jim9RFPkObHSjVHlVrxoVQXz7quwNFpz7RY1okNNme49+sVyiTvTRobiLV548Hx/hb1BG+iE7h9493WzFw==", + "license": "MIT", + "dependencies": { + "obuf": "~1.1.2" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/postgres-date": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/postgres-date/-/postgres-date-2.1.0.tgz", + "integrity": "sha512-K7Juri8gtgXVcDfZttFKVmhglp7epKb1K4pgrkLxehjqkrgPhfG6OO8LHLkfaqkbpjNRnra018XwAr1yQFWGcA==", + "license": "MIT", + "engines": { + "node": ">=12" + } + }, + "node_modules/postgres-interval": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/postgres-interval/-/postgres-interval-3.0.0.tgz", + "integrity": "sha512-BSNDnbyZCXSxgA+1f5UU2GmwhoI0aU5yMxRGO8CdFEcY2BQF9xm/7MqKnYoM1nJDk8nONNWDk9WeSmePFhQdlw==", + "license": "MIT", + "engines": { + "node": ">=12" + } + }, + "node_modules/postgres-range": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/postgres-range/-/postgres-range-1.1.4.tgz", + "integrity": "sha512-i/hbxIE9803Alj/6ytL7UHQxRvZkI9O4Sy+J3HGc4F4oo/2eQAjTSNJ0bfxyse3bH0nuVesCk+3IRLaMtG3H6w==", + "license": "MIT" + }, "node_modules/prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", @@ -14446,6 +14875,15 @@ "node": "*" } }, + "node_modules/split2": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/split2/-/split2-4.2.0.tgz", + "integrity": "sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==", + "license": "ISC", + "engines": { + "node": ">= 10.x" + } + }, "node_modules/sshpk": { "version": "1.18.0", "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.18.0.tgz", @@ -14919,6 +15357,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/tabbable": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", + "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==", + "license": "MIT" + }, "node_modules/tailwindcss": { "version": "3.4.14", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.14.tgz", @@ -15427,7 +15871,6 @@ "version": "2.8.0", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.0.tgz", "integrity": "sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==", - "dev": true, "license": "0BSD" }, "node_modules/tsutils": { @@ -16113,7 +16556,6 @@ "version": "6.19.8", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz", "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==", - "dev": true, "license": "MIT" }, "node_modules/unified": { @@ -17460,7 +17902,6 @@ "version": "4.0.2", "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==", - "dev": true, "license": "MIT", "engines": { "node": ">=0.4" diff --git a/package.json b/package.json index 8ac808f..d9e5663 100644 --- a/package.json +++ b/package.json @@ -29,12 +29,15 @@ "/postgres-data" ], "dependencies": { + "@headlessui/react": "^2.2.0", + "@heroicons/react": "^2.1.5", "@isaacs/express-prometheus-middleware": "^1.2.1", "@prisma/client": "^5.20.0", "@remix-run/css-bundle": "^2.13.1", "@remix-run/express": "^2.13.1", "@remix-run/node": "^2.13.1", "@remix-run/react": "^2.13.1", + "@types/pg": "^8.11.10", "bcryptjs": "^2.4.3", "chokidar": "^3.6.0", "compression": "^1.7.4", @@ -42,6 +45,7 @@ "express": "^4.21.0", "isbot": "^5.1.17", "morgan": "^1.10.0", + "pg": "^8.13.1", "prom-client": "^15.1.3", "react": "^18.3.1", "react-dom": "^18.3.1", diff --git a/public/css/styles.css b/public/css/styles.css new file mode 100644 index 0000000..5c3ad7a --- /dev/null +++ b/public/css/styles.css @@ -0,0 +1,14 @@ + /* public/css/styles.css */ + body { + font-family: Arial, sans-serif; + background-color: #f0f0f0; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + } + h1 { + color: #333; + } \ No newline at end of file diff --git a/public/simple.html b/public/simple.html new file mode 100644 index 0000000..805e850 --- /dev/null +++ b/public/simple.html @@ -0,0 +1,14 @@ + + + + + + + Static Page + + + +

Welcome to My Static Page

+ Logo + + \ No newline at end of file diff --git a/public/tailwind.html b/public/tailwind.html new file mode 100644 index 0000000..5f282da --- /dev/null +++ b/public/tailwind.html @@ -0,0 +1,25 @@ + + + + + + + + + +

+ Hello world! +

+

+ This is a paragraph styled with Tailwind CSS. +

+ + + diff --git a/public/tailwind2.html b/public/tailwind2.html new file mode 100644 index 0000000..4011aac --- /dev/null +++ b/public/tailwind2.html @@ -0,0 +1,79 @@ + + + + + + + + + +
+

E-commerce Store

+

Welcome to our online store. Find the best products here!

+ + + + + +
+
+ Product 1 +

Product 1

+

$19.99

+ +
+
+ Product 2 +

Product 2

+

$29.99

+ +
+
+ Product 3 +

Product 3

+

$39.99

+ +
+
+ + +
+ This is a dark mode example. +
+ + + + + +
+ Custom Color Example +
+ + + +
+ +