← Go Back
Pixel Sınav

Pixel Sınav

Pixel Sınav is a web platform designed for students preparing for exams. You can easily access exam-oriented questions and solutions on this platform. Course materials are also available.

2024web

Pixel Sınav: My Most Comprehensive Learning Project

Hello, I’m Poyraz Avsever. As part of advancing my software development journey, I created a project called Pixel Sınav to improve my technical skills and build something meaningful.

Pixel Sınav is a comprehensive educational platform built with modern web technologies, where teachers can create course content and students can track their learning progress.

In this article, I will share the development journey of this project, the technologies I used, the challenges I faced, what I learned, and my future plans.

Purpose and Background

There were two main motivations behind starting this project:

  1. I wanted to build higher-quality, more scalable, and technically challenging projects.
  2. I wanted to learn backend-focused technologies such as NestJS and Docker.

Additionally, my personal interest in educational technologies and my desire to contribute to this field helped shape the concept of Pixel Sınav. With the increasing digitalization in education, I aimed to build a platform that brings valuable learning content to users.

Why an Educational Platform?

EdTech aligns with my goals for personal growth while also generating social value. The idea of a system where teachers can easily produce content and students can learn at their own pace felt both motivating and technically challenging.

Through this project, I had the opportunity to apply many frontend and backend concepts in a practical way.

Technology Stack

While planning the tech stack, I decided to stay within the JavaScript ecosystem. This allowed me to use technologies like Next.js and NestJS together and build both frontend and backend using TypeScript.

Core Technologies

Technology Icon Description
Next.js Next.js A React-based, server-side rendering web framework
React React A component-based UI development library
TailwindCSS Tailwind Utility-first CSS framework for building custom designs
NestJS NestJS A TypeScript-based progressive Node.js framework
MongoDB MongoDB A scalable NoSQL document database
TypeScript TS A type-safe superset of JavaScript
Docker Docker Containerization technology to run applications in isolated environments
Jest Jest A JavaScript testing framework

Other Libraries

  • Framer Motion – Smooth animation library for React
  • React Markdown – Markdown rendering support
  • Chart.js + react-chartjs-2 – For student performance visualizations
  • React Hot Toast – Lightweight notification system

Design Process

For UI/UX inspiration, I referenced the platform Codedex. Its color palettes, clean typography, and simplicity greatly influenced my design choices.

I designed the UI myself and focused on:

  • Proper color contrast
  • Readable typography
  • Consistent spacing and layout
  • Mobile responsiveness with a flexible grid system

Frontend Code: GitHub - PixelSinav-Frontend
Backend Code: GitHub - PixelSinav-Backend

User Roles and Structure

Pixel Sınav has two main user roles:

  1. Teacher: Can create lessons, add content, and view student progress
  2. Student: Can enroll in lessons, read content, and track their own progress

Authentication, authorization, and role-based endpoints were implemented accordingly.

Development Process

Getting Started

I started with the frontend. The first step was to build the authentication system, including login, registration, and JWT-based session handling. After that, I moved to the teacher panel and developed the lesson creation module.

Backend Integration

I learned NestJS from scratch. The biggest challenges were understanding modular architecture and creating structured API documentation with Swagger.

What I accomplished quickly:

  • User registration and login
  • Secure token-based authentication with JWT
  • Email verification system
  • Lesson creation, listing, and deletion
  • Filtering lessons by teacher

Authentication and Authorization

JWT-based authentication was implemented in the NestJS backend. Protected routes were created based on user roles, and Swagger/OpenAPI was used to generate API documentation.

Sample Endpoints

  • POST /auth/register – Register a new user
  • POST /auth/login – Login and receive token
  • POST /lessons – Create a lesson (teacher only)
  • GET /lessons/teacher/:id – Get lessons by teacher ID

Testing, Validation, and Security

  • Validation Pipe: All requests are validated using class-validator
  • Jest: Unit and integration tests are written using Jest
  • Rate Limiting: Anonymous users have a limited request quota per hour

What I Learned

This project helped me gain hands-on experience in:

  • Building robust API architectures with NestJS
  • Using MongoDB Aggregation Framework for advanced filtering
  • Applying Clean Architecture principles in backend development
  • Improving responsive design skills on the frontend

Future Plans

I intend to continue developing this project. Some of my roadmap items include:

  • Developing a mobile app using React Native
  • Adding advanced exam result analytics
  • Implementing real-time notification features
  • Creating an admin panel and reporting system

Final Thoughts

Pixel Sınav is more than just a project for me. It’s a milestone that represents how far I’ve come and what I can build when I challenge myself.

If you're on a similar journey, feel free to clone the project, contribute to it, or simply star it on GitHub.

Useful Links

Thank you for reading.