{"id":26383015,"url":"https://github.com/pmarkaide/42_webdev_express","last_synced_at":"2026-05-16T00:33:03.438Z","repository":{"id":258365678,"uuid":"867986486","full_name":"pmarkaide/42_webdev_express","owner":"pmarkaide","description":"code for the Web Development month at Hive Helsinki","archived":false,"fork":false,"pushed_at":"2024-11-06T19:08:29.000Z","size":875,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-11T18:53:08.622Z","etag":null,"topics":["42school","back-end","backend","front-end","frontend","javascript","webdev","webdevelopment"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pmarkaide.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null}},"created_at":"2024-10-05T07:05:41.000Z","updated_at":"2024-11-06T19:08:33.000Z","dependencies_parsed_at":"2024-10-24T21:33:16.311Z","dependency_job_id":"02a98ae5-458a-4efa-a264-d639d88c7d7c","html_url":"https://github.com/pmarkaide/42_webdev_express","commit_stats":null,"previous_names":["pmarkaide/42_webdev_express"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/pmarkaide/42_webdev_express","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmarkaide%2F42_webdev_express","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmarkaide%2F42_webdev_express/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmarkaide%2F42_webdev_express/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmarkaide%2F42_webdev_express/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pmarkaide","download_url":"https://codeload.github.com/pmarkaide/42_webdev_express/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmarkaide%2F42_webdev_express/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271740720,"owners_count":24812642,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-23T02:00:09.327Z","response_time":69,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["42school","back-end","backend","front-end","frontend","javascript","webdev","webdevelopment"],"created_at":"2025-03-17T06:19:50.177Z","updated_at":"2025-11-07T05:03:06.556Z","avatar_url":"https://github.com/pmarkaide.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Welcome to our Pokedex project! 🎉\n\nThis web app is the result of a Web Dev Challenge organized by [Hive Helsinki](https://www.hive.fi/en/).\n\nAfter a hands-on workshop learning Full Stack dev with Postgree and React, we developed this app to learn first-hand how to build a complete web app.\n\n## 🎯 Challenge requeriments\n\nThe coding challenge needed to include the following:\n\n- A front end with at least 3 pages\n- User authentication (username and password)\n- An API\n- The use of an external API\n- A database\n\nIn the app people will be able to browse Pokémon, see various type of informations about these Pokémon and save their favourite ones.\n\nBrowsing the Pokémons should be available for anyone who visits the site, but a user should authenticate themselves (register, login) with a username and password to be able to save their favourites and see other people's profiles with their favourite Pokemon.\n\n## Our Pokedex\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/pmarkaide/meta/raw/master/pokedex.dashboard.png\" alt=\"dashboard\" width=\"1000\"/\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/pmarkaide/meta/raw/master/podekex.detail.png\" alt=\"detail card\" width=\"1000\"/\u003e\n\u003c/p\u003e\n\n## 🚀 What we have Learned\nThis is the Stack we decided to use for this app:\n\n* Frontend: Next.js, tailwind, skeleton and tostify\n* Backend: Express, Axios, JWT + bcrypt, GoooleAuth\n* Database: Docker and Postgree\n\nIn building this Pokedex, we have learned how to create a fetch call to external APIs from a server and present this information on a nice Frontend build in Next.js and styled with Tailwind. We mix this fetch information with our own database of liked Pokemon, so they can present already a detailed view of which ones are the people's favourites. This can be done by storing the fetched information in our database first, but the goal was to learn how to fetch and handle the response dynamically. To create this merge information, we first need to deploy a Docker container with Postgree, build some tables and learn how to make the Frontend send favourite Pokemon information to our database. To manage all the information exchange among the external API, the Backend database and the Frontend result we needed to develop a server with multiple endpoints (see examples below).\n\n## 🌟 Features\n* **Responsive Design:** Modern Stack for a seamless response.\n* **Browse:** see all existing Pokemon in a nice card view\n* **Filter:** filter the Pokemon you see by type\n* **Search:** Easily find your favourite Pokémon by name.\n* **Details View:** Click on any Pokémon to see its stats, type...\n* **Register:** register as a user using email or GoogleAuth\n* **Favorite:** like all your favourite Pokemon\n* **Profile:** view your profile with your level and favorite Pokemon\n* **User search:** see other registered user profiles\n* **Settings:** manage your username, password etc.\n\n## 📅 What’s Next?\nWe plan to deploy the app so we can learn this crucial aspect of FS.\n\nThanks for checking out my project! Happy exploring! 🌟\n\n\n\n\u003ch2 id=\"routes\"\u003e📍 API Endpoint examples\u003c/h2\u003e\n​\n\u003ch3 id=\"get-auth-detail\"\u003eGET /api/pokemons_with_likes\u003c/h3\u003e\n\n**RESPONSE**\n```json\n{\n  \"name\": \"bulbasaur\",\n  \"weight\": 20,\n\t\"height\": 10,\n  \"types\": {},\n\t\"favorites\": 3,\n\t\"...more objects\"\n}\n```\n\n\u003ch3 id=\"post-auth-detail\"\u003ePOST /api/login\u003c/h3\u003e\n\n**REQUEST**\n```json\n{\n  \"username\": \"rich\",\n  \"password\": \"1234\"\n}\n```\n\n**RESPONSE**\n```json\n{\n  \"token\": \"OwoMRHsaQwyAgVoc3OXmL1JhMVUYXGGBbCTK0GBgiYitwQwjf0gVoBmkbuyy0pSi\",\n\t\"message\": \"log\",\n\t\"user\": \"user{}\",\n}\n```\n\n\u003ch3 id=\"post-auth-detail\"\u003ePOST /api/register\u003c/h3\u003e\n\n**REQUEST**\n```json\n{\n  \"username\": \"rich\",\n\t\"email\": \"rich@gmail.com\",\n  \"password\": \"1234\"\n}\n```\n**RESPONSE**\n```json\n{\n  \"token\": \"OwoMRHsaQwyAgVoc3OXmL1JhMVUYXGGBbCTK0GBgiYitwQwjf0gVoBmkbuyy0pSi\",\n\t\"message\": \"Login succesful\",\n\t\"user\": \"user{}\",\n}\n```\n\n\u003ch3 id=\"post-auth-detail\"\u003eDELETE /api/users/favorites\u003c/h3\u003e\n\n**REQUEST**\n- **Headers**:\n  - `Authorization`: `Bearer \u003ctoken\u003e` _(Required)_\n\n- **Body** (JSON):\n```json\n{\n  \"userId\": \"3\",\n\t\"pokemonId\": \"3\",\n}\n```\n**RESPONSE**\n```json\n{\n\t\"message\": \"message: 'Favorite Pokémon removed successfully'\",\n}\n```\n\n\u003ch3 id=\"post-auth-detail\"\u003ePUT /api/users/:id/editUserInfo\u003c/h3\u003e\n\n**REQUEST**\n- **Headers**:\n  - `Authorization`: `Bearer \u003ctoken\u003e` _(Required)_\n\n- **Body** (JSON):\n```json\n{\n  \"username\": \"cat\",\n\t\"email\": \"cat@gmail.com\",\n\t\"id\": \"1\"\n}\n```\n**RESPONSE**\n```json\n{\n\t\"message\": \"message: 'Favorite Pokémon removed successfully'\",\n}\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpmarkaide%2F42_webdev_express","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpmarkaide%2F42_webdev_express","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpmarkaide%2F42_webdev_express/lists"}