NXT Assess.
Interactive Quiz & Assessment Platform
A responsive React assessment platform with authentication, protected routes, API-driven questions, multiple question formats, a timed assessment flow, and score tracking.
Project type
Responsive React application
Primary focus
Authentication, routing, and assessment flow
Technologies
React, React Router, and REST APIs
Project walkthrough
Inside NXT Assess
From the signed-in home screen through timed questions and results.
SCREEN 02
Assessment interface
Questions, answer formats, countdown, and question navigation are brought together in the assessment flow.
01 / OVERVIEW
About the project
NXT Assess guides signed-in users from the home screen into a 10-minute quiz and then to their results. Questions are fetched from an API, and answers stay available as users move between questions. The timer submits automatically when time runs out; users can also submit manually and reattempt the assessment.
10-minute assessment
Login, home, quiz, results, and reattempt
02 / FUNCTIONALITY
Key features
Authentication and protected routes
Validates credentials, shows API errors, supports password visibility and logout, and keeps unauthenticated users out of protected screens.
API-driven questions
Loads questions from the assessment API, handles loading and request failures, and offers a retry when fetching fails.
Multiple question formats
Renders default, image-based, and single-select options according to the question data.
Timed assessment and navigation
Uses a 10-minute countdown, tracks answered and unanswered questions, and preserves selections while moving between questions.
Results and reattempts
Shows the score and time taken when submitted manually, handles timeout results, and resets assessment state for another attempt.
03 / TECHNOLOGY
Technology stack
The client-side app combines React UI, routed screens, API data, and responsive CSS.
04 / IMPLEMENTATION
Development focus
The app uses React components and hooks to manage login state, asynchronous question loading, selected answers, question navigation, and countdown behavior. React Router connects the home, assessment, results, login, and not-found screens.
The login and questions are backed by the CCBP APIs. Protected routes control access, while loading, retry, and not-found states provide feedback when navigation or data requests fail.
Keep exploring
Explore NXT Assess
Visit the application or browse the repository to review the implementation.