React Final task. Cross-check: Swagger/OpenAPI UI

[maiano]

1. Task: link
2. Video: link
3. Screenshot:

4. Deploy: link
5. Done 12.07.2026 / deadline 14.07.2026
6. Score: 550 / 550

Feature 1: App Header(60 points)

• Non-authenticated users see Sign In and Sign Up buttons in the header's upper right corner. [15 points]
• Authenticated users see History and Sign Out buttons in the header's upper right corner. [10 points]
• Navigation link to About page is available in header and footer. [10 points]
• If the token is expired/invalid, the user is redirected from private routes to the Main page. [10 points]
• Pressing the Sign In / Sign Up button redirects to the route with the respective form. [15 points]

Feature 2: Sign In / Sign Up (50 points)

• Buttons for Sign In / Sign Up / Sign Out are present everywhere they should be. [10 points]
• Client-side validation is implemented (email format, password strength: min 8 chars, at least one letter, one digit, one special character, Unicode supported). [20 points]
• Upon successful login, the user is redirected to the Main page. [10 points]
• If the user is already logged in and tries to reach Sign In / Sign Up routes, they are redirected to the Main page. [10 points]

Feature 3: Swagger Editor (120 points)

• Loading/pasting OpenAPI/Swagger schema in JSON and YAML formats is supported. [25 points]
• Auto-detection of input format (JSON vs YAML) is implemented. [20 points]
• Format switching with automatic conversion (JSON ↔ YAML) works correctly. [20 points]
• Schema validation with error indication is implemented. [15 points]
• Authenticated users can save schemas; the saved schema is automatically restored in the editor upon next login. [10 points]
• The Viewer automatically populates with endpoints when the schema is valid. [10 points]
• Responsive split view adjusts based on screen orientation (horizontal/vertical). [20 points]

Feature 4: Swagger Viewer (120 points)

• Endpoint list is displayed with organization by path/method. [20 points]
• Endpoint details show method, path, and all parameter types (path, query, header, cookie). [25 points]
• Request schema and example payloads are displayed. [20 points]
• Response schema, examples, and all supported status codes are displayed. [25 points]
• Try-It-Out functionality allows filling parameters, headers, and body; executing requests; and displaying responses. [20 points]
• Generate cURL button with copy-to-clipboard functionality is implemented. [10 points]

Feature 5: History and Analytics (70 points)

• History and analytics is server-side generated and shows an informational message with links to the editor/viewer when there are no requests in the database. [15 points]
• Requests are displayed sorted by timestamp (most recent first). [10 points]
• The following analytics are recorded from the server side and displayed: request duration, response status code, request timestamp, request method, request size, response size, error details, endpoint/URL. [45 points]

Feature 6: About Page (25 points)

• About page is accessible to all users (public route). [5 points]
• About page contains information about the RS School course. [5 points]
• About page contains team member information (names, roles, GitHub links). [10 points]
• About page design is consistent with the application design. [5 points]

Feature 7: General Requirements (55 points)

• Multiple (at least 2) languages are supported with an i18n toggler in the header. [30 points]
• Sticky header with animation when it becomes sticky is implemented. [10 points]
• Errors are displayed in a user-friendly format. [10 points]
• Private routes are properly protected (401 if not authenticated). See RFC 9110. [5 points]

Feature 8: YouTube Video (50 points)

• A 5–7 minute YouTube video is linked in the pull request demonstrating all implemented features. [50 points]

[natanchik]

Consider splitting the code and extracting components and utility functions into their own files.

[natanchik]

You could map the cards to reduce duplication.

[maiano]

Thank you, I'll replace the duplicated cards with a mapped array

[natanchik]

Consider adding an index.ts with re-exports for cleaner imports.

[maiano]

Thanks, I'll guess about it. I prefer direct imports because they were more explicit and make it easier to see where the component is in a given case

[natanchik]

Choose one option: either a Button or a Link. If this is used for navigation, use a Link even if it looks like a button.

[maiano]

I guess i used shadcn asChild pattern. The rendered element is still the Link/<a>; Button only provides styling through Slot.