Submitted over 1 year agoA solution to the URL shortening API landing page challenge
URL Shortening link
redux-toolkit, tailwind-css, typescript, next
@franclobo

Solution retrospective
What challenges did you encounter, and how did you overcome them?
It was necessary to create a server side route handler to make the POST request to the API, because the API does not support CORS. The handler is as follows:
import { NextApiRequest, NextApiResponse } from 'next';
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
if (req.method === 'POST') {
try {
const { url } = req.body;
const response = await fetch('https://cleanuri.com/api/v1/shorten', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams({ url }).toString(),
});
if (!response.ok) {
throw new Error('Failed to fetch');
}
const data = await response.json();
res.status(200).json(data);
} catch (error) {
res.status(500).json({ error: error });
}
} else {
res.status(405).end(); // Método no permitido
}
}
Code
Loading...
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Francisco Borja Lobato's solution.
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