A full-stack web app to manage and track your personal library.
Users can sign up/Login, add books (with cover images fetched via ISBN/ASIN lookup),
mark reading status, search by title/author/genre, and filter their collection-built
as a learning project to master modern full-stack development.
A multi-platform "place picker" that randomly
suggests venues (e.g., restaurants, cafes, parks) from a curated
collection based on user-selected categories and tags-built to
explore end-to-end TypeScript/Express APIs, a React web client,
and native mobile prototypes.
A full-stack web app to manage and track your personal library.
Users can sign up/Login, add books (with cover images fetched via ISBN/ASIN lookup),
mark reading status, search by title/author/genre, and filter their collection—built
as a learning project to master modern full-stack development.
Tech Stack
Frontend: Frontend: React, React Router, Auth0 for authentication, Axios for HTTP, Bootstrap 5 for styling
Backend: Node.js with Express, MongoDB driver, JSON Web Tokens (JWT) for securing endpoints
DevOps & Testing: Docker & Docker-Compose for containerized local development, Jest & Supertest for API testing, Swagger (swagger-jsdoc + swagger-ui-express) for API docs
Screenshots
Coming Soon...
GitHub Repo: github.com/jnycolej/BookKeeper
Live Demo Link (Coming Soon)
Case Study
Challenge 1: Integrating Auth0 for secure user authentication without compromising UX.
Solution: Followed Auth0’s React SDK docs to implement login/signup flows and protected routes.
What I Learned: OAuth fundamentals, handling auth state in React.
Challenge 2: Managing complex state for filtering/searching large lists in React.
Solution: Lifted state into parent, used controlled components for filters, optimized re-renders with useMemo.
What I Learned: Effective state management patterns and performance tuning in React.
Challenge 3: Containerizing a multi-service app for consistent local environments.
Solution: Wrote a docker-compose.yml to spin up MongoDB, backend, and frontend in isolated containers.
What I Learned: Basics of Docker networking, volumes, and orchestration.
Spot Roulette
A multi-platform "place picker" that randomly suggests venues
(e.g., restaurants, cafes, parks) from a curated collection based
on user-selected categories and tags-built to explore end-to-end
TypeScript/Express APIs, a React web client, and native mobile prototypes.
Tech Stack
Web Frontend: React (TypeScript), React Router,
Axios for HTTP requests, CSS for styling
Backend: Node.js, Express.js, TypeScript, CORS; serves static JSON
datasets for places & tags via custom /api/places and /api/tags routes
Dev Tools: Git & GitHub for version control;
npm & ts-node-dev for local development scripts
Mobile Prototypes (Archived): Android app in Kotlin; iOS app in Objective-C++
Screenshots
Coming Soon...
GitHub Repo: github.com/jnycolej/SpotRoulette
Live Demo Link (Coming Soon)
Case Study
Challenge 1: Designing a flexible, tag-based filter with "any" vs. "all" match modes.
Solution: Built a reusable filterPlaces utility to combine type and tag filters dynamically.
What I Learned: Functional programming patterns in TypeScript and robust API design.
Challenge 2: Serving location data without a full database.
Solution: Used static JSON files (places.json, tags.json) and simple Express routes to mock production-style endpoints
What I Learned: Trade-offs of prototyping with static vs. dynamic data sources.
Challenge 3: Rapidly prototyping cross-platform mobile experiences.
Solution: Created early Android (Kotlin) and iOS (Objective-C++) demos to validate UX flows
What I Learned: Foundations of mobile development workflows and platform differences.
