P
David Tsanava• 50
@datots
Submitted
P
SabaMarghania1
@SabaMarghania1
All comments
- PSabaMarghania1• 490
@SabaMarghania1
Posted
Your code quality is pretty good, and with only useState for state managements it's really nice. I can't say anything about design part, but if you want my suggestion or opinion about programming part, Check useEffect,useReducer ,useContext and react-router-dom. Also for modals, library which you used is good but try to create your own, with portals. To know exactly how to do this.
0 - PAmjad Shadid• 770
@amjadsh97
Submitted
What are you most proud of, and what would you do differently next time?
I learned how to handle form by using formik library. it was great and helpful. I will make an app by using formik and integrate it with backend.
PSabaMarghania1• 490@SabaMarghania1
Posted
it's good
Marked as helpful
0 - Isaac Agboola• 20
@The-isaacagboola
Submitted
What are you most proud of, and what would you do differently next time?
I totally enjoyed building this under a self imposed deadline of 24hours. I overshot it with a few hours anyway. I feel fulfilled
What challenges did you encounter, and how did you overcome them?
Managing images import from a data.json file was a little tricky solved it by making th e imports first then assigning the entire file to a javascript array object. Also found out i could have sipmply solved this using the react tag.
Also encoutered slight issues with the state management; solved this by obeying the standard practice of declaring globally used variables in the context declaration and making use of the spread operator to clone the global items when used in a seperate module. Came up with a personally law; NEVER TRY MUTATING A CONTEXT VARIABLE FROM A SEPERATE MODULE, RATHER DEFINE THE FUNCTION IN THE CONTEXT THEN USE IT ELSEWHERE.
What specific areas of your project would you like help with?
An overview of the industry standard on state management and its dynamics.
PSabaMarghania1• 490@SabaMarghania1
Posted
If you want, to use images without import you can use public folder for this purpose. also check useReducer.
0 - Mikal Paudel• 110
@mikalPaudel
Submitted
What are you most proud of, and what would you do differently next time?
i did it fast
What challenges did you encounter, and how did you overcome them?
maybe with the padding and margin as always. also i dont know if i have styled the design correctly.
What specific areas of your project would you like help with?
responsive page
PSabaMarghania1• 490@SabaMarghania1
Posted
It's good, for centering you can use flex.
Marked as helpful
0 - tejas11054• 20
@tejas11054
Submitted
PSabaMarghania1• 490@SabaMarghania1
Posted
In design, you already know what you need to do, but make sure to include an easy feature for user experience. When a person types, automatically insert a space after every four digits. you can find it in my code, or on a stackoverflow
const input = document.getElementById("credit-card-input"); input.addEventListener("input", () => input.value = formatNumber(input.value.replaceAll(" ", "")));
use this, but make sure that you understand what you are doing here! const formatNumber = (number) => number.split("").reduce((seed, next, index) => { if (index !== 0 && !(index % 4)) seed += " "; return seed + next; }, "");
0 - Melvin Aguilar 🧑🏻💻• 61,220
@MelvinAguilar
Submitted
🎁 Features:
- Next.js Server Actions to fetch data with:
- Filtering 📂
- Pagination ♻️
- Sorting 🔍
- Achieved +95% in Lighthouse score for performance, accessibility, best practices, and SEO. 📊
- Resemblance with the original design. 🎨
- Small animations with Framer motion. 🎬
- No errors or warnings using ESLint (Airbnb style guide). ✔️
- Custom hooks. 🎣
- Utilized TailwindCSS for responsive styling. 🎨
- Codebase is well-maintained and formatted using Prettier. 💻
🛠️ Built With:
- Next.js 14. ⚡
- TypeScript 🚀
- TailwindCSS. 🎨
- ESLint (Airbnb style guide). 📦
- Framer-motion. 🎬
- npm - prettier - prettier-plugin-tailwindcss. 💻
🔍 Clarifications:
- While the Rest Countries API was an option, it had limitations like lack of pagination and limited filtering capabilities. I opted to utilize Server Actions in Next.js and the data.json provided with the challenge. This allowed seamless integration with MongoDB for efficient data handling.
- I acknowledge that continuous polling for change requests might consume more data, but it was implemented for experimental purposes.
Any suggestions on how I can enhance this solution or achieve even better performance are welcome!
Thank you. 😊✌️
PSabaMarghania1• 490@SabaMarghania1
Posted
Wow, That's amazing. how did you develop your coding skills?
0 - Next.js Server Actions to fetch data with:
- caner404• 280
@caner404
Submitted
What are you most proud of, and what would you do differently next time?
The integration of Cypress. even if it was only a small test
What challenges did you encounter, and how did you overcome them?
stop procrastinating
What specific areas of your project would you like help with?
I'm trying to focus more on accessibility
PSabaMarghania1• 490@SabaMarghania1
Posted
it's good
0
