- Retired engineer restarting a career as fullstack developer. - Experient GNU/Linux syadmin. - Arduino enthusiast. - Fluent in English, Spanish and Portuguese. - Amateur UI/UX researcher.
I’m currently learning...TailwindCSS, NextJS, React Native and Cypress
How to better code the situation when a portion of the UI appears from below, dragging up the content above.
I am keep hope about start a group in this community to solve challenges like the industry do: More than one programmer working over the same application.
I'm in a quest to find other coders interested to form a group not only to solve FEM challenges, but also to build application in the qortal.org environment.
I would like to connect with other learners here that also like the stack: React and Tailwind. Maybe to pair programming...
I would like to be able to connect with other users in this platform to discuss developing and to find others interested about React Native, Tailwind, etc...
It would be nice to have a methodology to adjust the page to different window sizes in a fluid manner. In other words, to use a positioning (absolute) system that can produce transitions between screen sizes keeping a continued and harmonic flow.
Next time I would maybe have the email be handled in state rather than passing it as a uriencoded search parameter. But it worked well for a small project of this size.
What challenges did you encounter, and how did you overcome them?None in particular apart from the email validation regex
What specific areas of your project would you like help with?None in particular
A neat solution !
Some comments:
The page uses the font Roboto only in the second screen (confirmation). The first screen does not apply it.
The filter to accept the email address could be improved as an address like aaa@bbb.ccccc is being accepted. There are better regex expressions that can do the job.
Hope that this helps.
What I’m most proud of: I’m most proud of how I was able to design and implement a clean, responsive, and user-friendly UI for the URL shortener app using React and Tailwind CSS, while also integrating the Bitly API to handle link shortening efficiently. I’m particularly happy with the real-time feedback system, where users get instant validation errors or success messages, and the smooth API interaction with proper error handling. What I’d do differently next time: Next time, I would build a custom backend service with Node.js, Express, and MongoDB so I could store user-generated links, add authentication and link history tracking, and avoid reliance on third-party API limits. I’d also incorporate analytics features so users can track click counts and trends for their shortened links, making the tool more functional and data-driven.
What challenges did you encounter, and how did you overcome them?Challenges and How I Overcame Them: One major challenge was validating user input to ensure only properly formatted URLs were processed. I solved this by implementing a regex-based validation check on the client side before sending any API requests. Another challenge was handling API errors and network failures gracefully — especially when the Bitly API returned errors for invalid or duplicate links. I addressed this by adding try-catch blocks, checking HTTP status codes, and displaying clear, user-friendly error messages. Finally, ensuring mobile responsiveness across different screen sizes was tricky, but I overcame this by leveraging Tailwind’s responsive design utilities and thoroughly testing the app using Chrome DevTools’ device simulation.
What specific areas of your project would you like help with?Areas I’d Like Help With: I’d like feedback on optimizing API calls to make the app faster and reduce unnecessary re-renders when a user submits multiple links in a short time. I’m also looking for suggestions on how to refactor my React components for better scalability — especially if I decide to add authentication, analytics, or a custom backend in the future. Additionally, I’d appreciate guidance on implementing secure link storage and click-tracking features using best practices for performance and security.
Good job !
But you should add '.env' in the .gitignore to protect your API key.
Usually here in FEM we use the REAME-template.md to produce the README.md by changing the appropriate content on it.
As your project has the file tailwind.config.js it is clear that is Tailwind version 3. Notice that version 4 do not use this file anymore.
It is good practice to remove the console.log that are not essential to the system. Like errors, etc...
./netlify/functions/shortnerurl.js: console.log('url', url);
./netlify/functions/shortnerurl.js: console.log(data);
./netlify/functions/shortnerurl.js: console.error('Error:', error);
Hope that this helps.
That I was able to complete this project.
What challenges did you encounter, and how did you overcome them?meaning things though, because I am not used to using NEXT.js because I am still learning it, but I am just glad I was able to get it done
What specific areas of your project would you like help with?uhm... if I can get a big help on how to make this project as a fullstack project i will be so glad
Wonderful!
Just a little bug. If ramsesmiron offers a comment, it is not added in the page.
I was able to use react and tailwindcss to build this pretty challenge by myself
What challenges did you encounter, and how did you overcome them?It was hard to put font thou It went out successfully but later failed which I would need some help
What specific areas of your project would you like help with?Help me how to insert the font properly and insert the import the proper logo on top of the browser because its still showing react icon logo
Great job!
Some comments:
The app does not use App.css, so removed it.
Better not hard code colors like text-[#6c7289]. Use CSS variables instead.
If the ZIP file of the challenge has the font family file, load it instead of make the user download it from Google.
This is not setting the font family fraunces at all:
<h2 className="text-xs font-fraunces text-[#6c7289] font-[500] tracking-[0.6em] mb-4">
PERFUME
</h2>
There is a typo: --font-Fraunces: "Fraunces";
Hope that this helps...
A neat solution !
Some comments:
The email validation is too restrictive.
if (!(email.includes("@") && email.includes(".com")))
There are regular expressions that validate but not restrict.
Tailwind is not being used.
At step 4 if the user click the 'change' and choose another periodicity, at screen 3 the periodicity is month by default and not the one previously chosen.
The way CSS is organized there is a lot of code repetition. The DRY methodology calls us for not to do that... Maybe Tailwind could indeed be helpfull here!
Well done !
Some comments:
The 'wrapper'class is used in only one place (Navbar) so, why not place there max-w-[1310px] mx-auto ?
It is better accessibility to use REMs instead of pixels. So 1310 / 16 = 81.875rem.
In more than one place motion was imported from motion/react but never used.
A more readable version of NavLiitem:
return (
<li className="relative cursor-pointer group">
{children}
<span
className="
absolute -bottom-[5px] left-2 w-0 h-[2px] bg-primary-w
transition-all duration-300
group-hover:w-[50%]"
/>
</li>
);
};
Hope that this helps.