{"id":20925213,"url":"https://github.com/antonharbers/waldo-clone-frontend","last_synced_at":"2026-04-11T17:02:59.463Z","repository":{"id":221496410,"uuid":"754352104","full_name":"AntonHarbers/Waldo-Clone-Frontend","owner":"AntonHarbers","description":"Waldo Clone - The Odin Project: https://www.theodinproject.com/lessons/nodejs-where-s-waldo-a-photo-tagging-app","archived":false,"fork":false,"pushed_at":"2024-02-14T18:24:33.000Z","size":2912,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-12-26T06:48:31.366Z","etag":null,"topics":["api","javascript","react","react-router","tailwindcss","theodinproject"],"latest_commit_sha":null,"homepage":"https://main--odinwaldoclone.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AntonHarbers.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-07T21:57:28.000Z","updated_at":"2024-02-25T22:33:18.000Z","dependencies_parsed_at":"2024-11-19T06:06:56.504Z","dependency_job_id":null,"html_url":"https://github.com/AntonHarbers/Waldo-Clone-Frontend","commit_stats":null,"previous_names":["antonharbers/waldo-clone-frontend"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AntonHarbers/Waldo-Clone-Frontend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AntonHarbers%2FWaldo-Clone-Frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AntonHarbers%2FWaldo-Clone-Frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AntonHarbers%2FWaldo-Clone-Frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AntonHarbers%2FWaldo-Clone-Frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AntonHarbers","download_url":"https://codeload.github.com/AntonHarbers/Waldo-Clone-Frontend/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AntonHarbers%2FWaldo-Clone-Frontend/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31687882,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-11T13:07:20.380Z","status":"ssl_error","status_checked_at":"2026-04-11T13:06:47.903Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","javascript","react","react-router","tailwindcss","theodinproject"],"created_at":"2024-11-18T20:29:50.461Z","updated_at":"2026-04-11T17:02:59.446Z","avatar_url":"https://github.com/AntonHarbers.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Wheres Waldo Knockoff Frontend - The Odin Project 📚\n\nThe Waldo Clone Frontend brings the nostalgic \"Where's Waldo?\" game into the digital era. Built with the modern React framework, this web application offers players a dynamic and interactive experience as they scour different levels trying to find certain fun characters. TailwindCSS ensures a sleek, responsive design, while Vite speeds up development with its hot module replacement. Dive into various game levels, challenge yourself against the clock, and see how you rank on the leaderboards!\n\n[Live Link](https://main--odinwaldoclone.netlify.app/)\n\n[API Repo](https://github.com/AntonHarbers/odin-waldo-api)\n\n[API Endpoint](https://lowly-famous-silica.glitch.me/)\n\n## Getting Started 🚀\n\nReady to dive into the game?\n\n- **Clone the project** to your local machine:\n\n```bash\ngit clone https://github.com/AntonHarbers/Waldo-Clone-Frontend.git\n```\n\n- **Enter the project directory** and install its dependencies:\n\n```bash\ncd Waldo-Clone-Frontend\nnpm install\n```\n\n- **Fire up the development server** and start exploring:\n\n```bash\nnpm run dev\n```\n\nNavigate to `http://localhost:3000` to see the app in action!\n\n## Key Concepts 💡\n\n### Component Architecture\n\nThe heart of this project lies in its React components, each serving a unique part of the app's functionality. From the main game interface to leaderboards, every piece is modular and reusable, making the codebase clean and maintainable.\n\n**Example from `App.jsx`:**\n\n```jsx\nfunction App() {\n  return (\n    \u003cRouter\u003e\n      \u003cnav\u003e...\u003c/nav\u003e\n      \u003cRoutes\u003e\n        \u003cRoute path=\"/\" element={\u003cMenuPage /\u003e} /\u003e\n        \u003cRoute path=\"/level1\" element={\u003cGamePage /\u003e} /\u003e\n        ...\n      \u003c/Routes\u003e\n    \u003c/Router\u003e\n  );\n}\n```\n\n### React Router\n\nNavigating through the game's levels and menus is seamless, thanks to React Router. It enables the application to maintain a single-page app feel, with URL changes reflecting different game states without reloading the page.\n\n**Navigation Example (`App.jsx`):**\n\n```jsx\n\u003cRoutes\u003e\n  \u003cRoute path=\"/leaderboards\" element={\u003cLeaderboardMenu /\u003e} /\u003e\n  \u003cRoute path=\"/level1leaderboard\" element={\u003cLeaderboardPage /\u003e} /\u003e\n  ...\n\u003c/Routes\u003e\n```\n\n### TailwindCSS for Styling\n\nStyling with TailwindCSS is a breeze 🌬️. It allows for rapid UI development, making it possible to apply responsive design and beautiful aesthetics with minimal effort.\n\n**Styling Example (`CharacterSelect.jsx`):**\n\n```jsx\n\u003cdiv className=\" select-none relative h-[50px] w-[50px] border-4 border-red-500\"\u003e\n  ...\n\u003c/div\u003e\n```\n\n## API Endpoints Overview 🌍\n\nThe frontend interacts with the [Waldo API](https://github.com/AntonHarbers/odin-waldo-api), a separate entity that manages game logic and data. Key interactions include fetching character locations, submitting game times for leaderboard ranking, and retrieving leaderboard data. Ensure the API is up and reachable to get the full gaming experience.\n\n- **Fetching characters:** `/characters`\n- **Posting game scores:** `/games/:id/time`\n- **Fetching leaderboard data:** `/games/:level`\n\n(Refer to the backend documentation for more details on the API endpoints.)\n\n## Final Notes 📝\n\nBuilding the Waldo Clone Frontend was not just about coding; it was a journey through effective web development practices. React's component-based architecture taught me the importance of breaking down the app into manageable pieces, while TailwindCSS showed me the power of utility-first CSS in creating responsive designs. Most importantly, this project underscored the significance of user experience in game development, focusing on how interactive elements and performance impact overall enjoyment.\n\n## Contribution Note 🚫\n\nAs a portfolio project, I'm currently not accepting contributions. However, I encourage you to clone and explore the code for educational purposes. Dive in, experiment with it, and maybe even create your own version of the game. Let's keep the spirit of learning and exploration alive!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantonharbers%2Fwaldo-clone-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fantonharbers%2Fwaldo-clone-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantonharbers%2Fwaldo-clone-frontend/lists"}