| Design and Styling |
30 |
| Overall Design |
|
| The overall design is graded on a scale based on an aggregate of ratings from the course staff to reduce subjectivity. |
|
| 10 pts: Great design, visually appealing, and follows good layout and design principles. This app’s design would be production-ready. |
|
| 7 pts: Good design, appealing, and follows most good layout and design principles. (Baseline) |
|
| 4 pts: Average design with some glaring violations of design principles. |
|
| 1 pt: Inadequate design that violates many design principles. |
|
| To increase your overall design score, consider augmenting your design with good color, typography, and iconography choices that follow the design principles discussed in class! Also, compare your app’s design to the four key principles of design to see if there are ways to add improvements. |
|
| Potential Extra Credit |
|
| +3pts: Exceptional design that would make a user excited to use the app far above the baseline! |
10 |
| Shadcn Usage |
|
| Your design makes use of Shadcn components and uses the right components for the job / feature that you are trying to implement. This will also be graded based on an aggregate of ratings from the course staff to reduce subjectivity. |
|
| 10 pts: Great use of Shadcn components, using the best components for specific features. |
|
| 7 pts: Good use of Shadcn components throughout. |
|
| 3 pts: Uses Shadcn components, but many of the components used are not adequate for the feature implemented (for example, using small text inputs for large posts, text inputs for dates, using destructive buttons for non-destructive actions, etc!) |
|
| 0 pts: Project did not use Shadcn component |
10 |
| Lighthouse Report Score |
|
| Running the Lighthouse report on your project shows implementation that has good SEO and accessibility. |
|
| 5 pts: Score of >=90 for both SEO and accessibility. |
|
| 4 pts: Score of >=90 for either SEO or accessibility, and a score of >=75 for another. |
|
| 2 pts: Score of >=75 for both SEO and accessibility. |
|
| 0 pts: Score of <75 for either SEO or accessibility. |
5 |
| Light and Dark Mode Support |
|
| Your app should function well for light and dark mode. You may either implement this feature by allowing the app to respond to the system color, or respond to just a mode toggle. To implement light and dark mode support, follow this guide here. |
|
| 5 pts: App looks good and core features are usable on both light mode and dark mode. |
|
| 3 pts: App functions mostly fine on both light and dark mode, but visual bugs might occur. |
|
| 0 pts: No attempt to implement light / dark support. |
5 |
| Responsive Design |
|
| Your app should be usable on mobile devices. Since implementing responsive CSS can be a bit tedious, this will entirely be left as extra credit. |
|
| Potential Extra Credit (Max one of the item below) |
|
| +3pts: Most of your app uses Tailwind breakpoints / responsive styling to look good on mobile devices. |
|
| +1pts: At least one page uses Tailwind breakpoints / responsive styling to look good on mobile devices. |
0 |
| Backend |
30 |
| Database |
|
| Your application uses the Supabase Database to power the backend of your application. |
|
| 5 pts: Your app should include at least 4-5 database tables in addition to any configured profile table. |
|
| 3 pts: There are at least 1-2 relationships between tables in your app. |
|
| 2 pts: At least one table uses an RLS policy. |
10 |
| Authentication |
|
| Your application uses the Supabase Authentication to manage authentication in your app. |
|
| 3 pts: Users are able to sign in or sign up for an account with your site using an email and password. |
|
| 2 pts: At least one page in your app is accessible by only logged-in users. To accomplish this, check the getServerSideProps() **method under the homepage in A06 and A07 for inspiration. |
5 |
| Storage |
|
| Your application uses the Supabase Storage to manage user-uploaded file content for your app. |
|
| 3 pts: Images (or some other type of file) should be uploadable by users to Supabase Storage. |
|
| 2 pts: Images (or some other type of file) displayed on your site are accessed from Storage. |
5 |
| Realtime |
|
| Your application implements at least two features from Supabase Realtime in your application. |
|
| 5 pts: One type of Supabase Realtime interaction is |
|
| implemented to enhance or add a feature to |
|
| your app. |
|
| 5 pts: Another type of Supabase Realtime interaction |
|
| is implemented to enhance or add a feature to |
|
| your app. |
10 |
| Other |
5 |
| Code Formatting |
|
| Your code should be formatted with Prettier and ESLint. |
|
| 3 pts: Code is formatted correctly and best practices |
|
| are followed. |
|
| 0 pts: Code has not been formatted. |
3 |
| Vercel Analytics |
|
| Analytics have been configured with your project. |
|
| 2 pts: Project includes the Vercel analytics component. |
|
| 0 pts: No analytics component included. |
2 |
| Potential Deductions |
|
| -50pts: No Vercel deployment attempted or deployment is |
|
| entirely broken. This is a big deduction - if you have |
|
| problems deploying, PLEASE see us in |
|
| office hours!! |
|
| -(Variable): Team member lacks contributions. |
|
| This deduction applies to individual scores and would |
|
| not affect the overall team score. |
|