• Fetch user specific playlists from the Spotify API.
• Filter playlists based on selected criteria.
• Sort playlists based on selected criteria.
• Randomize the playlists track order.
• new playlists for the users account, after applying refinements.
• Light/Dark mode. Responsive Layout.

• Dynamically Filtering: Use multiple filters to filter a dataset by different categories.
• Filter Status Managment: See which filters are "available" and which are currently "active".
• Interactive Filter Selection: Click to move filters between "available" and "active" lists.
• Adaptive Remaining Filters: Available filters show only those options that the user can still choose from.
• URL Sync: Active filters are reflected in the browser URL. Simply share the current filter combination, or paste a URL to revisit a specific set of filters.
• Reset Filters: Clear all active filters and reset the URL to start over.

NEXT.JS

• Create client and server components.
• Handle form submit in Next.js via: useFormState() + useFormStatus() to control the "pending-status" and "response-messages" on the client-side.
• Use Next.js Server Actions for CRUD operations. Read and write data from the database via Prisma ORM on the server-side.
• Validate form data against a Zod schema.

DATABASE

• Create a Prisma ORM schema and connect to the Vercel PostgreSQL Database.
• Add various SQL relations: one-to-one, one-to-many, many-to-many.
• Query the database via Prisma ORM and "populate" relations during querying.
• Integrate a simple pagination mechanism to read the database.

AUTHENTICATION

• Authenticate a user via GitHub OAuth procedure.
• Lock certain features based on the session/login status.

• Accessibility optimzation. Semantics, ARIA, Lighthouse.
• Scroll events and animations. Typewriter.
• Custom components: Horizontal scrollable gallery. Progress indicator.

• QR-Code Scanner/Camera.
• Offline storage (app works without internet).
• Manage two ticket types: qr-code & box office.
• Download, update, search or filter a list of tickets.
• Statistics for: total sales & daily checkins.
• Counter for recent checkins.
• Light/Dark theme.
• Switch Languages.
• Always keep screen awake.

• Mobile-first, fully responsive (phone, tablet, laptop)
• Calculator functionality.
• MUI components (input, snackbar, grids, paper), color palettes and typography.
• Customize MUI theme based on style guide.

• Grid Layout, Navbar and Routing, Header, Notification, Tooltips.
• Modal, Form Input, Form Validation, Searchbar, Filter Function.
• Dynamic Data Table, Pagination, Page Size.
• Progress Stepper, Conditional Next/Back/Finish/Reset Functionality.
• Loading Skeleton.
• Snackbar/Alert Functionality.

• HTML + CSS
• HTML + Bootstrap CSS
• React Native

• Have a SPA frontend, built with React.
• Have a REST API backend built with ExpressJS, MongoDB and Mongoose.
• Have a REST API backend with routes that perform all CRUD actions.
• Include sign up, log in & log out functionality with encrypted passwords and authorization.
• Have two separate repos on GitHub. One repo is for your frontend React application and the other is for your backend REST API.
• Present and demo your app during the Final Project presentations.

• Use Express as a foundation.
• Use Mongoose for models and database communication.
• Have 2 models or more.
• Have validation on the models with feedback for users if their submission is invalid.
• Include sign up, log in & log out functionality with encrypted passwords and authorization.
• Implement all CRUD actions on models.
• Make use of OOP paradigm.
• Present and demo your app during the Final Project presentations.

• Render a game in the browser.
• Have logic for winning and/or losing and show feedback to the player in either case.
• Use plain JavaScript for DOM manipulation (or HTML canvas for graphics).
• Have a repo on GitHub.
• Be deployed online using GitHub Pages so that anybody can play it.
• Stick with KISS, DRY, YAGNI principles.
• Make use of OOP paradigm.
• Present and demo your app during the Final Project presentations.

• Conditionals.
• Functions.
• Scope.
• Arrays.
• Loops.
• Iterators.
• Objects.
• Classes.
• Modules.

• Fundamentals.
• Strings and regular expressions.
• Data Structures, array methods, lists, sorting.
• Logic puzzles, algorithms.
• Performance optimized code.
• Edge cases.

JS FUNDAMENTALS

• JS coding concepts, nodeJS.
• HTML, CSS, DOM.

BACKEND

• MVC, Response-Request-Cylce.
• REST, API, CRUD, ExpressJS.
• DB, ODM, MongoDB.
• CORS, security, password encryption, bcryptJS.
• Nodemailer, Json-Server.

FRONTEND

• Axios, fetch external API.
• SPA rendering, component-based architecture.
• React: component lifecycle: state, side-effects, hooks.
• React: flow of information: props/callbacks (pass down/lift up).
• React: routing, navigation.
• React: context (theme, language, auth).

FULLSTACK

• Token-based Authentication: authentication - verification - authorization, public/private/protected routes, login/signup input data validation, user feedback (success/error) messages, handle token expiration, error handling.
• File-Upload via Cloudinary: multipart/form-data.