District Cinema Sample Project

A small SvelteKit project allowing me to showcase my skills to District Cinema by creating a demo application from scratch, using tools similar to those in their deployment.

Table of Contents

1. Setup Instructions
2. Code Structure
3. Design Choices

Setup Instructions

1. Clone the repository:

   git clone https://github.com/maxbraun1/dc-sample-project.git
   cd dc-sample-project
   

2. Install Dependencies:

   npm install
   

3. Set Environment Variables:

• Create a .env file in the root directory.

• Add the following variables:

  DATABASE_URL=supabase-db-connection-url
  PUBLIC_SUPABASE_URL=supabase-url
  PUBLIC_SUPABASE_KEY=supabase-key
  

4. Run the application:

   npm run dev
   

5. Open the application: Visit http://localhost:5173/ in your browser.

Code Structure

I tried to follow the project and code structure recommended in the SvelteKit documentation closely. I stored components and utility functions in src/lib and followed standard routing patterns in src/routes.

I used load functions to retrieve initial page data and Form Actions to handle user submitted data. I used a global $state variable to store category ids and names once they were fetched, and used this global array to find category names from ids when pulling in new products from real-time Supabase updates.

If I were to continue working on this project, I would like to separate some of the complexity in the root +page.svelte file, as well as add much more validation to the form actions.

Design Choices

• Live Updates: The best way I found to implement live updates from Supabase was to capture the affected product data and either remove, update, or add it to the state based on the eventType.
• Search & Filter: I opted to perform the search and filter on the already-loaded state data, given the small amount of products and limited time. On a more in-depth project I would implement pagination for products and categories as well as moving the searching and filtering functionality to the back-end.
• Svelte Store: When researching Svelte stores, I came across this documentation page stating "Prior to Svelte 5, stores were the go-to solution for creating cross-component reactive states or extracting logic. With runes, these use cases have greatly diminished." I followed the docs and created a what is essentially a store in /src/lib/state.svelte.ts, exporting a variable using the $state rune.
• Reused Components: I identified reusable pieces of layout code and separated them into components.
• Header: I created a Header component and included it in the root layout so it would appear on every page.
• Forms: I decided to separate all forms with visible inputs onto separate pages for a cleaner UX.
• Form Actions: As directed by the SvelteKit docs, I used Form Actions for client to server communication wherever possible, which, in such a small and simple project, turned out to be everywhere.