Goal

To establish a clear project roadmap and choose the most suitable technologies.

Result

Using Asana and common agile processes with check-ins 5 times a week, we were able to smoothly divide the work and keep a pace that allowed us to complete all but 5 or 6 of the 75 or so User Stories

Takeaways

• Team collaboration tools like Asana and daily check-ins were critical in keeping us on track

Goal

To integrate a secure, scalable authentication system, that integrates Github and Google OAuth, with an onboarding system to properly set first time users up.

Result

Using a seperate route group (auth) in the app directory, I made a sign-in and sign-up route with a custom design. Using webhooks, Svix, and Server Actions, these goals were accomplished in short order.

Takeaways

• ClerkJS was flexible and customizable, which greatly reduced development time while offering strong authentication features.
• Making a seperate route group for auth made it easier to manage and test the auth system.

Goal

For users to have their own personal page that displays all the content they've contributed, as well as links to other platforms they're on.

Result

Starting with the layout, set up a DOM that matched our design, then adding functionality to the page. Using the power of Typescript Types, Prisma's ability to query data easily through either SQL or their own modules, NextJS's server actions, and TailwindCSS convenient and flexible styling, it took somewhere between 2 and 3 weeks to complete this feature.

Takeaways

• NextJS dynamic routing came in handy here in order to load the correct profile page based on the user's ID, as well as editing the profile page. Fetching complex data on the server with the correct custom type was challenging , but mission was accomplished.

Goal

Using the momentum I'd gained from working on the auth and profile pages, and identifying the similarities between some of the elements on the profile page as well as projects I've done before, design the DOM, and set up a sorting and pagination system.

Result

Leveraging the power of Prisma's ability to use raw sql queries, and using the URLSearchparams and useSearchParams features of HTML and React, I was able to set up a system that allowed users to sort by date, popularity, and other factors, as well as paginate through the content. I completed it rather quickly and even added some animation to the page using framer motion. I especially am fond of the group cards that fade in and then cascade outward. Using query-strings, I was able to make the page dynamic and responsive to user input.

Takeaways

• Framer motion used in spurts is a great way to spice up the look of a page, but overdoing it can be distracting. The ability to query data on the server and then send it to the client is a powerful tool that can be used to make a page dynamic, fast, and save on resources. Following the pattern of designing the HTML first, then adding the dynamic elements, is a good way to keep the project organized and my workflow on track.

Goal

To create a site-wide audio player that allows users to listen to audio content while they browse the site.

Result

Using a Context Provider, the <audio /> HTML API, and a custom hook, I was able to create a site-wide audio player that allows users to listen to audio content while they browse the site. The player is responsive and can be controlled from any page on the site.

Takeaways

• Using a context provider, I was able to make the audio player site-wide, and responsive. The custom hook I made was able to control the audio player from any page on the site, allowing users to browse other posts while listening to a podcast.