{"id":51888060,"url":"https://github.com/code-beaker/url-shortener","last_synced_at":"2026-07-26T00:01:16.111Z","repository":{"id":367608945,"uuid":"1281392946","full_name":"Code-Beaker/url-shortener","owner":"Code-Beaker","description":"Shortly - URL Shortener | A Frontend Mentor project","archived":false,"fork":false,"pushed_at":"2026-06-26T17:27:19.000Z","size":153,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-26T19:13:51.662Z","etag":null,"topics":["frontend-mentor-challenge","reactjs","tailwindcss","url-shortener"],"latest_commit_sha":null,"homepage":"https://shortly-app-three.vercel.app","language":"JavaScript","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/Code-Beaker.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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-26T14:08:15.000Z","updated_at":"2026-06-26T17:27:23.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/Code-Beaker/url-shortener","commit_stats":null,"previous_names":["code-beaker/url-shortener"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/Code-Beaker/url-shortener","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Code-Beaker%2Furl-shortener","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Code-Beaker%2Furl-shortener/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Code-Beaker%2Furl-shortener/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Code-Beaker%2Furl-shortener/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Code-Beaker","download_url":"https://codeload.github.com/Code-Beaker/url-shortener/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Code-Beaker%2Furl-shortener/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35896124,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-07-20T02:08:10.276Z","status":"online","status_checked_at":"2026-07-25T02:00:06.922Z","response_time":64,"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":["frontend-mentor-challenge","reactjs","tailwindcss","url-shortener"],"created_at":"2026-07-26T00:01:14.840Z","updated_at":"2026-07-26T00:01:16.102Z","avatar_url":"https://github.com/Code-Beaker.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# URL Shortener App using React JS, TailwindCSS and TinyURL\n\n- [URL Shortener App using React JS, TailwindCSS and TinyURL](#url-shortener-app-using-react-js-tailwindcss-and-tinyurl)\n  - [Preview](#preview)\n  - [Tech Stack](#tech-stack)\n    - [Frontend](#frontend)\n    - [Backend](#backend)\n    - [API](#api)\n  - [Features](#features)\n  - [Process](#process)\n  - [Testing for others](#testing-for-others)\n    - [Installation](#installation)\n    - [Environment Variables](#environment-variables)\n      - [Frontend](#frontend-1)\n      - [Backend](#backend-1)\n    - [Run Locally](#run-locally)\n    - [Deployment](#deployment)\n  - [What's next?](#whats-next)\n\nHi everyone, I'm attempting a Frontend Mentor challenge after a long time.\n\nI have always used HTML, CSS and JavaScript for all my previous challenges. For this one, I decided to go with React and TailwindCSS. I thought that might help me learn React more. I want to learn more by building projects. It took me about 5-6 hours to code this.\n\nOne thing I noticed whilst is, coding with React felt faster compared to just plain HTML and CSS. I also used ChatGPT to solve errors with code and also implement the API functionality.\n\nI used React, TailwindCSS and TinyURL for this project. Also implemented a mobile navigation menu to make this responsive for mobile devices. I believe it's not the best implementation, but it does work.\n\n## Preview\n\n![Preview](Shortly.jpg)\n\n## Tech Stack\n\n### Frontend\n\n- React\n- Vite\n- Tailwind CSS\n\n### Backend\n\n- Node.js\n- Express.js\n\n### API\n\n- [TinyURL](https://tinyurl.com/)\n\n## Features\n\n- Shorten long URLs\n- Copy shortened URLs\n- Responsive design\n- Backend API built with Express\n- TinyURL API integration\n\n## Process\n\nThe biggest challenge was the API itself. I tried cleanuri but, noticed that the shortened URL was redirecting to some random websites. So, I had to switch to TinyURL for the URL shortening to actually work.\n\nThe next challenge was setting up the backend to make the API key secure. I had to set up Express to create a backend server and deploy it using Render. I'm not familiar with Backend, so this was a new kind of workflow for me. This setup took the longest time because switching from cleanuri to TinyURL gave me a bunch of errors and I had to change a lot of code. I had to check their documentations and do some ChatGPT to get these issues solved.\n\nI did vibe code the footer since coding the footer is one of the most boring parts of a project as per my experience. It is responsive and does work as expected.\n\nAny help on improving my code would be appreciated. I'm a beginner in React, so my code isn't the best — if you could share better coding practices, tips, or anything useful, that'd be great.\n\n## Testing for others\n\n### Installation\n\nClone the repository\n\n```bash\ngit clone https://github.com/yourusername/url-shortener.git\ncd url-shortener\n```\n\nInstall frontend dependencies\n\n```bash\nnpm install\n```\n\nInstall backend dependencies\n\n```bash\ncd server\nnpm install\n```\n\n### Environment Variables\n\n#### Frontend\n\nCreate a `.env` file in the project root.\n\n```env\nVITE_API_URL=http://localhost:3000\n```\n\n#### Backend\n\nCreate `server/.env`\n\n```env\nTINYURL_API_TOKEN=YOUR_API_TOKEN\n```\n\n### Run Locally\n\nStart the backend\n\n```bash\ncd server\nnode server.js\n```\n\nStart the frontend\n\n```bash\nnpm run dev\n```\n\n### Deployment\n\n- Frontend: Vercel\n\n- Backend: Render\n\n## What's next?\n\nThis is my attempt to apply what I have learned in React in a real project. I will try building more projects to create a solid foundation in React.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode-beaker%2Furl-shortener","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcode-beaker%2Furl-shortener","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode-beaker%2Furl-shortener/lists"}