A Exam proctoring website bootstrapped with Create React App.
- Video Explanation - This video explains the walkthrough of the application
video.mp4
Users should be able to:
- View the list of capsules
- Search for capsules based on serial, type or status
- View details of each capsules
- View optimal layout based on the screen device
- Solution URL: (https://github.com/faozziyyah/Faozziyyah_Daud__JuniorFE)
- Live Site URL: (https://faozziyyah.github.io/Faozziyyah_Daud__JuniorFE/)
- CSS
- React - React: JS library
- Typescript - Typed programming language that builds on JavaScript
- TailwindCSS - A utility-first CSS framework
useEffect(() => {
const fetchCapsules = async () => {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error('Failed to fetch data');
}
const data: Capsule[] = await response.json();
setCapsules(data);
setIsLoading(false);
} catch (error) {
setError(error instanceof Error ? error.message : 'An unknown error occurred');
setIsLoading(false);
}
};
fetchCapsules()
}, [ currentPage ]) <ReactPaginate
pageCount={Math.ceil(filteredCapsules.length / n)}
onPageChange={handlePageChange}
containerClassName="pagination"
activeClassName="active"
/>In the project directory, you can run:
then...
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent