So, what's the most tedious part about tutoring? Marking countless assignments writing new comments, formatting and inserting all of these marks and comments into some database. This process was a big pain, so why not spend even longer and more time building an app to save a some time 😅

What I Aimed To Achieve With This Project:

1. Getting to Know Next13: Wanted to get the hang of the React Server Component (RSC) and the App directory setup.
2. Playing Around with MDX: Needed to figure out the best ways to render and extend features using mdx.
3. Experimenting with Dynamic Forms: Initially aimed for Houseform or Formik. Ended up ditching HouseForm due to a bug and wasn't vibing with DX. So, I went with Formik
4. Building Figma Skills (Side Goal): I wanted to build my skills in Figma, so I prototyped the entire website there. If you're curious, you can check out a similar style design I did for a workout app I was building in my Figma post.

So, What's The Outcome?

I ended up with a clean app that lets markers create a form based on assignments. They can score students on different components and note down comments. One-click and all the info is neatly formatted and ready to be dropped into the database. The best part? The comments section! Say 15 students make the same mistake. Instead of noting down the same feedback repeatedly, I can note it down once. The system recalls all comments linked to that issue. So, when I start a new comment that resembles a previous one, it pops up as a suggestion. so satisfying 🎉

Oh, and there's more! The app has space for tutors to check out assignment specs and essential marking tools. Think mock databases ready to be inspected or downloaded. The site is set up in a way markdown and page setup is all there in the source code. So, fellow tutors can keep adding to or tweaking the pages. Also thanks to mdx rendering, embedding components within pages is ezz so keen to see what others can do with this.

Edit* - Auth

As part of the process of hosting I realised having some the docs information online might not be the best since students can use the mock databases and read tutor-only messages 😅

So, I fixed the problem by setting up a login system with Next-Auth. The middleware matches for all pages of the documentation but certain pages that can be left public. Through all of this, I learned a lot about different ways to authenticate users and how to limit access to just to authorised users.