A focused skill exchange UI built with Next.js, TypeScript, and Tailwind CSS.
This project highlights clean front-end architecture, predictable UI behavior, and deliberate trade-offs in a small but realistic product interface.
https://skillswap-shir.vercel.app
- Organized by reusable UI and route-based structure
- Kept state local where global state was unnecessary
- Prioritized straightforward components over early abstraction
- Used local/mock state only where it supported meaningful user interactions
- Structured to scale into a full-stack app without major refactoring
- Browse skill listings
- Filter listings in real time
- View listing details
- Create a new listing (local form)
- Mark listings as favorites (local state)
- Basic localization (English / Norwegian)
- Custom not-found handling for invalid routes
- Simple and predictable routing (Next.js App Router)
- Clear and maintainable component structure
- Consistent UI patterns across pages
- Avoiding unnecessary abstraction
- UI that reflects real functionality (no fake actions or flows)
- No backend or database
- No authentication
- No real search engine or API
- No persistence beyond local state
These limitations are intentional.
The focus is on front-end structure, state management, and user experience, not full product complexity.
- Next.js (App Router)
- React
- TypeScript
- Tailwind CSS
Install dependencies and run the development server:
npm install
npm run devThen open http://localhost:3000
This project is intentionally small and focused. It prioritizes clarity, consistency, and maintainability over feature completeness.
- Persist listings with a backend
- Add authentication
- Improve accessibility and keyboard navigation