Url Shortening API

Please log in to post a comment
Log in with GitHubCommunity feedback
- @ippotheboxer
When I press on the shorten link button, shortening the link doesn't seem to show anything - in your code, you have <UrlList /> commented out.
You have your code to shorten the url in the frontend, but trying to hit up cleanURI won't work in the frontend due to CORS policy. You can set up a very simple backend with node and express, host it separately, and then use fetch with that backend route to get the response. If you're not sure how to use node or express, you can use chatgpt to help with it since this code will be quite simple.
Here's an example:
You will need to install Node.js.
In a backend folder, create server.js
const express = require("express"); const path = require("path"); const app = express(); const PORT = 5000; app.use(express.static(path.join(__dirname, 'build'))); app.use(express.json()); app.use(cors()); // Serve the static files from the React build folder app.use(express.static(path.join(__dirname, "build"))); // Endpoint to shorten URLs app.post("/shorten", async (req, res) => { try { const { url } = req.body; if (!url) { res.status(400).json({ error: "URL is required" }); return; } const response = await axios.post("https://cleanuri.com/api/v1/shorten", new URLSearchParams({ url })); res.json(response.data); } catch (error) { console.error("Error:", error); res.status(500).json({ error: "Failed to shorten URL" }); } }); // Catch-all route to serve the React app for all other routes app.get("*", (req, res) => { res.sendFile(path.resolve(__dirname, "build", "index.html")); }); // Start the Express server app.listen(PORT, () => { console.log(`Server running on port ${PORT}`); });
You can try using this locally, then you could deploy it on render.
Marked as helpful
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord