This is an event planning app built using SvelteKit. The user can see their current events and is able to add new ones.
The app currently supports server-side rendering (SSR) to fetch events data via the Events Interface defined under $lib/server/remote-events.ts, and route-based navigation for different events (e.g., /eventid
).
We recommend using Visual Studio Code (VS Code) for this project, as it provides excellent support for SvelteKit development via extensions.
Install Visual Studio Code
If you don't have VS Code installed, you can download it here:
https://code.visualstudio.com/
Recommended Extensions for VS Code
This project includes recommended extensions in its workspace settings.
When you open the project in VS Code, you will be prompted to "Install All" recommended extensions.
Click "Install All" to quickly set up your environment.
Alternatively, you can find the recommended extensions by searching @recommended
in the Extensions pane in VS Code.
To run this project locally, follow these steps:
Install dependencies:
npm ci
Start the development server:
npm run dev -- --open
This will open the project in your browser
Exercise Goals
This project has some intentional gaps for you to address. Your task is to complete the following improvements and enhancements:
Do not use AI tools on this project. You are expected to know and understand all the details of your implementation
Enhancement: Sluggish user experience
Problem: The app is slow to load and navigate between routes.
Task: Optimize the app page load performance by utilizing SvelteKit's response streaming feature. Do not modify the remote-events.ts file and continue to use it as is.
Task: Optimize form submission by showing a loading indicator while the form is being submitted. Use Sveltekit's built-in Progressive enhancement feature for form to do this.
Enhancement: No way to edit or delete existing events
Bug: User is able to submit a new event in the past
Enhancement: Basic Styles
Freestyle (Optional)