-
Notifications
You must be signed in to change notification settings - Fork 0
Project Overview
This page should give you a good general overview of the structure and technologies we're using in this project, along with providing resources if you're stuck on any part. Feel free to skip around or use this as a reference, but if this is your first time, please read through the whole thing. And don't worry if any of this doesn't make sense yet; you'll learn as you go
This site is like Rate My Professors but for SJSU students. Instead of looking up professors, you search classes to see who teaches them in a user-friendly UI, showing professor ratings and grade distributions.
Features:
- Check out class and professor ratings and reviews on one page.
- Sign up and log in with Google.
- Easy search through SJSU's course catalog.
- etc.
- For this project we'll be using Svelte/Sveltekit as our framework and metaframework since they're pretty easy to pick up and get started with
- Svelte, the framework, lets us break down our app into multiple reusable components and make our site interactive. SvelteKit, the metaframework, provides us structured ways for routing and handling server interactions, making it easier to make full-featured web applications. You can think of this like React/Next.js respectively if you're familiar with those
Resources
- Sveltekit Video (Some of this stuff is outdated since we're using Svelte 5 but this is a good overview)
- Sveltekit Docs
- Svelte 4 Docs
- Svelte 5 Docs
- Svelte Tutorial (Keep in mind this is Svelte 4 but a lot of stuff transfers over)
- For our styling, we'll be using a combination of Tailwind and a combination of a few UI libraries like DaisyUI and Shadcn Svelte
- Tailwind lets us write CSS directly in our markup which helps us build custom designs quickly without the need for writing lots of custom CSS and dealing with a ton of global styles.
- DaisyUI is built on top of Tailwind and lets us easily implement pre-designed components and themes. I recommend using this if you're unfamiliar with Shadcn since it's easy to pick up.
- Shadcn Svelte is another component library that installs the components directly into our project. I like how these components look a lot more but it might be a little hard to understand how it works. We might take this out though and stick to DaisyUI later on though to make everything more consistent
Resources
- For our database, we're going to be using a dockerized PostgreSQL instance.
- We're going to be using Drizzle in our project as well. An ORM (Object-Relational Mapping) allows us to interact with tables as though they were objects in our code, giving us type safety and a JS-like way to interact with SQL.
- Drizzle also gives us Drizzle Kit, which helps us handle migrations to our database, and Drizzle Studio, letting us view and interact with our database locally.
- If you don't have any experience with SQL, don't worry; it's easy to pick up. Since we're using Drizzle, interacting with it will be pretty straightforward since Drizzle will let us interact with it as if they were part of our code.
Resources
- SQL (This is MySQL instead of Postgres but most of this information still applies)
- Drizzle Video
- Drizzle Docs
- To keep everything contained to SCE, we're going to be using Lucia as our auth library, which gives us easy ways to handle sessions and all the other authentication stuff without needing to use an external provider.
Resources
Now that you know the general structure of this project (again, don't worry if any part doesn't make sense, you'll learn as you go), you can move on to the Getting Started page