I am a passionate front-end developer with backend experience. I specialize in building web applications using React, TypeScript, Vite, and Tailwind CSS. On the backend, I have experience in creating full-stack applications with REST APIs built using Flask or Node.js with Express.
I’m currently learning...Full Stack Web Development - with Supabase, Firebase, Drizzle ORM, React Cross Platform Mobile Development - React Native, Expo Vue.js alternative for React
Latest solutions
Responsive Browser Extension UI | Vue | Tailwind | Pinia
#pinia#tailwind-css#vue#accessibilitySubmitted 3 months agoImprovement of accessiblity.
Responsive Ticket Generator | HTML, SCSS, JS
#sass/scssSubmitted 7 months agoI would like to know ways I can improve my accessibily, scss code and my JS code.
Responsive Landing Page React + Typescript + TailwindCSS
#react#tailwind-css#typescriptSubmitted 8 months agoNavbar, better positioning of background images
Responsive Time Tracking Dashboard | HTML CSS JS
Submitted 8 months agoMaking it more accessible and optimizing the js code.
Latest comments
- @angel-serrato@dylan-dot-c
Great Solution! Looks clean and nice.
Few things to improve:
- add some padding on the body element so that it doesn't touch the borders on desktop and remove it on mobile.
- also remove the border radius on mobile so that it will make the entire screen white background and it will cover up the beige/brown looking color
Check out my solution and tell me what you think
- @Stryde2022What are you most proud of, and what would you do differently next time?
n/a
What challenges did you encounter, and how did you overcome them?n/a
What specific areas of your project would you like help with?i wouldnt say specifically but you are welcome to take a lot, it was pretty easy
@dylan-dot-cHey it looks good
But I can't see the navbar on mobile tho
- @emperor1239182What challenges did you encounter, and how did you overcome them?
the mobile bar svg provided wasn't displaying.
@dylan-dot-cGreat Attempt Emmanuel, you put alot of effort into this.
But to be honest, you need to hone your react/js/frontend skills some more before trying harder challenges like this one.
Focus on these
- responsive web design, with media queries or tailwindCSS
- Form validation techniques
- flexbox and grid
- State Management
And others, I did this challenge with react so you could take a look and tell me what you think!
- @220100dungvan@dylan-dot-c
Well done on this challenge!
Main issue to fix is to make sure the last timeframe text shows the last timeframe like 'yesterday' for daily, 'last month' for monthly and not just last week for all.
Also Maybe ur repo is private because I cant see it, it says not found
- @Stryde2022What are you most proud of, and what would you do differently next time?
i did this in one sitting, took me over three hours tho lol , i am too freaking slow, and this is a very easy one
What challenges did you encounter, and how did you overcome them?none
What specific areas of your project would you like help with?my earlier project i was advised to make use of the BEM methodology in future projects, so i did some research on it and tried to to apply it here, turns out i dont fully understand it yet, so i abandoned it and ended up sticking with what i know. any help on that would be very much appreciated
@dylan-dot-cYo bro! This is a good solution but there are a few stuff you need to cover...
- Html forms, here you can wrap it in a form tag and that will give you some added functionality. Mainly how you added the validation, but the form still submits for an empty string. So first wrap the code in a form element. Add
<button type="submit"/>
add an eventlistener to the form tag.onSubmit
. And check the email value, if its wrong, you can have a variable that outputs the error or usereturn
which should stop the form from submitting.
<input type="email" name="email" id="email" placeholder="email@company.com"> <button class="suscribe-btn"> Subscribe to monthly newsletter </button>
Overall good solution, make sure to test the website thoroughly so you know everything works as expected. Also in some cases you can relay on HTML validation like required and pattern.
- Html forms, here you can wrap it in a form tag and that will give you some added functionality. Mainly how you added the validation, but the form still submits for an empty string. So first wrap the code in a form element. Add
- @OffixialTrustWhat are you most proud of, and what would you do differently next time?
It’s my first time building a multi page project (don’t know what they call it SPA when it’s clearly MPA). I’m proud of myself, as I’m improving my ReactJS skills
What challenges did you encounter, and how did you overcome them?The challenges are too many to mention. How I overcame? Well… let’s say it helps to have a quality support system and networks.
What specific areas of your project would you like help with?Any advice will be helpful. And yes I didn’t use the best of the “best practices”.
@dylan-dot-cHey well done with this challenge it looks excellent!
I think there are a few things to improve
-
Firstly accessibility. I see why you have an handle navigate function to programmatically change the route on click, but one draw ack is accessibility, like a user limited to their keyboard won't be able focus on that country and cant click on it. One solution is to wrap it with an anchor tag so that will be presented as a focusable link.
-
I realized you had a json file with all the countries, and while that ain't a bad approach, it would be good approach to use ajax or just fetch to get from the real API, and use other API endpoints to get the specific country, instead of passing in the data down(still isn't a bad idea and you don't have to worry about the countries API failing).
-
I think you can look up tanstack query to see another way of fetching data from an API.
Anyways, take a look at my solution did it awhile so forgive the react code, I need to update some things. But tell me what u think
-