Project
Assessment Criteria
- Appropriate use of CSR and SSR
- The website should mostly work without JavaScript
- Appropriate use of Server components or equivalent
- Design patterns and best practices
- Clear file structure
- Clear separation of models, components (view), routes
- Use of TypeScript in strict mode
- Avoid code repetition as much as possible
- Code is linted (prettier, eslint)
- The UI should be broken down into small components
- UX and UI
- The website behaves as much as possible like a native app for clients who have JavaScript. In particular, there should not be any page reloads.
- Fine-grained control over client-side rerendering (i.e.
useEffector equivalent)
- Server-Side concerns
- ORM use
- The code does not leak crucial code to the client bundle
- Separate API accessible for a mobile client
Assessment grid
| Criterion | Marks |
|---|---|
| Functional constraints | |
| Behaves like a Single Page Application | 1* |
| A good understanding of state, effects and life-cycle hooks | 2 |
| All server actions can be performed via an API route | 2 |
| Uses correctly implemented authentication | 1* (merci Thibaut) |
| Complexity of the project | 3 |
| UX and UI | |
| The application looks like a native app and not just like an "old" website | 1 |
| The interface is attractive and easy to use | 1 |
| Design is responsive and works on different screen sizes (smartphones, tablet, etc.) | 1 |
| Code quality | |
| Code is clearly written, variables have clear names | 1 |
| Clear file structure and separation of concerns | 1 |
| UI is broken down into components | 1 |
| Accessibility | |
| The first render happens on the server (for bots and SEO) | 1* |
| The website is still functional without JavaScript | 1 |
| Best practices for accessibility are implemented | 1 |
| Security | |
| The client bundle doesn't leak crucial information | 1 |
| The code doesn't have any critical security issue (passwords are stored securely, etc.) | 1 |
Exam questions
- Why do we use JavaScript frameworks?
- Why do we use TypeScript?
- How does React work? What is the Virtual DOM? What is JSX?
- What is SSR? Why do we use a meta-framework like Next.js?
- How does authentication work? Why do we need to salt and hash passwords, or sign cookies?