Nocra

Fuel your superiority complex - dominate the noobs.

Comment 1

Inspiration

Why do we love sports and video games so much? Why are we so attached to winning these things and they somehow feel so personal? Everyone has something that they love being the best at. If anyone were to dare take this status away from them they would fight till the end of it.

What if school was like this? Most students, especially in STEM, tend to have a competitive mindset and/or a superiority complex. Imagine logging on to your school portal and seeing that you're almost at the bottom of the leaderboard. Myself and many others in this situation would jump to start studying.

It's not all grades. Students chasing a career know this well. Imagine then, if your small scale projects are not completely useless - but rather you can get rewarded for putting in the effort to do them. This is one of the largest features of Nocra - the ability to directly reward projects and extracurriculars.

What it does

Nocra is a competitive learning platform designed to motivate students at university. Students compete for ranks and status. Although there is no material prize, the pure prestige of being the best amongst your classmates is worthwhile.

Two Performance Metrics: Grades: Calculated using the formula: (Relative Difficulty) * Current Grade. The difficulty is inversely proportional to the previous year's average grade for the course. Projects: Evaluated through a dual review system comprising randomized anonymized peer reviews and an AI analysis using OpenAI GPT for instant feedback. Each review method contributes to a comprehensive rating to minimize bias overall.

Proudly displays top students on a leaderboard to showcase their status and efforts for everyone to know.

How I built it

Going into this solo, it was a daunting task at first. I quickly planned to build a frontend, with dummy data for testing. Later, I would integrate the backend that can fetch this data from a database.

I used Next.js to structure the project which uses React internally. I used TypeScript for type safety across my project which was a huge plus in debugging. Tailwind CSS was leveraged for its easy to use classes. I also used Framer Motion to animate some of the components. Deployed it on Vercel.

Planned: OpenAI gpt-3.5-turbo API to generate assessments for students' projects. Firebase for easy login with google and real time database updates.

Challenges I ran into

Obviously, the largest challenge for me was time. I could not integrate the backend server using Next.js 14's API routes although I learned a lot about it's structure and how it handles requests.

I had never built a full-stack web app before, let alone an actual use of React. I found Next.js to be extremely helpful compared to other tools but once again the learning curve was strong. Took me a while to know how I can structure the site.

There is also the fact that I did not have any illustrators on my team, leading me to use Valorant's rank icons for testing.

Accomplishments that I'm proud of

Building a very clean, functional and modern looking UI without using any pre-built components, allowing for a unique feel.

Optimized site performance using Next.js SSR (Server Side Rendering) allowing for an extremely fast feel when using the app.

Best practices of React, using client side at the deepest points and integrating mock data for later fetch from backend.

What I learned

Aside from the technology I've listed above, I learned an exceptional amount about full stack web applications. This marked the beginning of my first real project and I took it slowly making sure I understand all aspects of a website, which I found that most people overlook. I learned about proper planning and UI design, the different teams surrounding web development, backend integration, databases, REST API's, etc. its just so much. Most importantly, I learned about the importance of having a team to have your back in building out these complex apps on time.

What's next for Nocra

I fully plan to build out the backend of Nocra to allow for proper functionality. Regarding the product itself, there are countless educational features that I want to implement such as ideation chat bots for making projects and a study scheduler regarding relative course difficulty. This is a product I've always wanted and I look forward to taking this into function.

Built With

Share this project:

Updates