https://github.com/siruscodes/country-explorer
https://github.com/siruscodes/country-explorer
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/siruscodes/country-explorer
- Owner: SirusCodes
- Created: 2025-06-14T06:50:01.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-16T09:19:45.000Z (about 1 year ago)
- Last Synced: 2025-08-03T20:55:46.293Z (11 months ago)
- Language: TypeScript
- Homepage: https://country-explorer-dun.vercel.app
- Size: 219 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Country Explorer
A Next.js app to explore countries, view details, and manage favorites with authentication.
---
## Setup & Run Instructions
1. **Clone the repository:**
```sh
git clone
cd country-explorer
```
2. **Install dependencies:**
```sh
yarn install
```
3. **Run the development server:**
```sh
yarn dev
```
The app will be available at [http://localhost:9002](http://localhost:9002).
---
## Credentials for Mock Login
- **Username:** `user`
- **Password:** `password`
---
## Design Choices, Assumptions, and SSG/SSR Explanation
- **Authentication:**
- Simple cookie-based mock authentication is used. The `countryExplorerAuth` cookie is set on login and checked in middleware for protected routes.
- Middleware (`src/middleware.ts`) restricts access to authenticated users except for public paths (login, home, API routes, etc).
- **Routing & Data Fetching:**
- **Country list and details** use **Incremental Static Regeneration (ISR)** for fast load times and SEO. Country data is fetched once and a static page is generated which is cached with validity for a day.
- **Favorites** and user-specific data use **Client-Side Rendering (CSR)**, as they depend on the authenticated user does not requires SEO and already pretty light weight.
- **Login/logout** handled via API routes (`/api/login`, `/api/logout`).
- **UI/UX:**
- Built with React and Tailwind CSS for a modern, responsive interface.
- Components are modular and reusable.
- **Assumptions:**
- No real backend; authentication and data are mocked for demo purposes.
- All users share the same country data; favorites are stored in client state only.
---
## State Management Solution
**React Context API** is used for global state management:
This approach is lightweight and sufficient for the app's needs, avoiding the complexity of external libraries like Redux/Zustand.