Learn how to approach your third ticket in the Labs project and understand the development workflow.
View your third ticket details and requirements on GitHub:
Third Ticket DocumentationLearn how to implement a React client application that integrates with your backend API.
// Example project structure
src/
├── components/
│ ├── common/
│ │ ├── Button.jsx
│ │ ├── Card.jsx
│ │ └── Navbar.jsx
│ ├── auth/
│ │ ├── LoginForm.jsx
│ │ └── ProtectedRoute.jsx
│ └── pages/
│ ├── Home.jsx
│ ├── Dashboard.jsx
│ └── AssignmentView.jsx
├── services/
│ ├── api.js
│ └── auth.js
├── context/
│ └── AuthContext.jsx
└── utils/
└── helpers.js
// Example of authentication context setup
import { createContext, useContext, useState } from 'react';
const AuthContext = createContext();
export function AuthProvider({ children }) {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
const login = async (credentials) => {
try {
const response = await api.post('/api/auth/login', credentials);
const { token } = response.data;
localStorage.setItem('token', token);
setUser(response.data.user);
} catch (error) {
throw error;
}
};
return (
{children}
);
}
// Example of API service setup
import axios from 'axios';
const api = axios.create({
baseURL: process.env.REACT_APP_API_URL,
headers: {
'Content-Type': 'application/json'
}
});
// Add request interceptor for auth token
api.interceptors.request.use(config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});
export const getAssignments = () => api.get('/api/assignments');
export const getAssignmentById = (id) => api.get(`/api/assignments/${id}`);
export const updateAssignment = (id, data) => api.put(`/api/assignments/${id}`, data);
Review essential React concepts and frontend development practices for building the client application.