Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All solutions

  • Submitted

    Invoice app

    #mongodb#next#node#tailwind-css#typescript
    • HTML
    • CSS
    • JS

    0


    What are you most proud of, and what would you do differently next time?

    I'm most proud of the seamless integration between the backend and frontend in my recent full-stack project. Seeing them work together so effectively was incredibly rewarding. Looking back, I would focus more on performance optimization, especially for larger datasets, to enhance the overall user experience.

    What challenges did you encounter, and how did you overcome them?

    One of the main challenges I encountered was getting familiar with Git Flow for the first time. Initially, it was a bit overwhelming with its branching model and release management concepts. However, as I started using it more, I realized its immense value in managing feature development and hotfixes. It greatly improved the overall workflow of the project, and I now consider it an integral part of my development process.

    What specific areas of your project would you like help with?

    I would appreciate assistance in improving the accessibility of the application. Ensuring that all users, including those with disabilities, can effectively use the app is crucial. Additionally, I would like help in optimizing the performance of both the frontend and backend, especially in terms of loading times and resource utilization.

  • Submitted

    Frontend quiz app w/ (Next + Tailwind + Typescript) šŸ‘Øā€šŸ’»

    #jest#next#tailwind-css#typescript#redux-toolkit
    • HTML
    • CSS
    • JS

    2


    šŸ‘Øā€šŸ’» Hello everyone!

    I thoroughly enjoyed working on this project and using gitflow for the first time. The organizational structure it offers is compelling, making me feel more confident in developing branches with specific goals. I plan to invest more time in mastering gitflow to enhance my skills.

    As for the project, I'm pleased with the outcome. Despite not being a highly complex app, the experience was rewarding and beneficial. It allowed me to revisit Next.js concepts, contributing significantly to my professional growth.

    Technologies used:

    • Next
    • Typescript
    • TailwindCSS
    • Redux
    • Jest

    If you have any suggestions for code improvements, please feel free to share!

    Thanks! šŸ˜Š

  • Submitted

    Entertainment web app w/ (Angular + Node + Typescript) šŸ‘Øā€šŸ’»

    #angular#mongodb#node#typescript#tailwind-css
    • HTML
    • CSS
    • JS

    1


    šŸ‘Øā€šŸ’» Hello everyone!

    This was my second full-stack project, and I'm thrilled with the outcome. Throughout the development process, I learned some new technologies, which was a bit challenging, but I believe I did a good job.

    Technologies used:

    Front-end:

    • Angular
    • Typescript
    • TailwindCSS
    • Ngrx
    • Jasmine

    Back-end:

    • Node
    • Typescript
    • Express
    • MongoDB

    Concepts that are shaping backend architecture:

    • SOLID
    • Dependency Injection
    • Repository Pattern

    If you have any suggestions for code improvements, please feel free to share!

    Thanks! šŸ˜Š

  • Submitted

    Link sharing app w/ (Next + Node + Typescript) šŸ‘Øā€šŸ’»

    #express#next#node#typescript#mongodb
    • HTML
    • CSS
    • JS

    2


    šŸ‘Øā€šŸ’» Hello everyone!

    This was my first fullstack project, and I'm really proud of how it turned out. I faced some challenges during planning, development, and hosting, but I learned a lot. It's my best work so far and my biggest project yet. I'm super happy with the results.

    Looking ahead, I'm excited to work on even bigger projects and improve my backend skills. My goal is to keep learning and getting better.

    Technologies used:

    Front-end:

    • Next
    • Typescript
    • TailwindCSS
    • Redux
    • Storybook
    • Jest

    Back-end:

    • Node
    • Typescript
    • Express
    • MongoDB
    • Firebase

    Concepts that are shaping backend architecture:

    • SOLID
    • Dependency Injection
    • Repository Pattern

    If you found any bugs or have any suggestions to improve this project, feel free to comment. I'm committed to making this project better and more effective, and your help is critical to achieving that goal.

    Thanks! šŸ˜Š

  • Submitted

    Kanban task management w/ (Next + Typescript + Tailwind) šŸ‘Øā€šŸ’»

    #jest#next#storybook#tailwind-css#typescript
    • HTML
    • CSS
    • JS

    4


    šŸ‘Øā€šŸ’» Hello everyone!

    I'm so glad I completed this amazing challenge! I've learned a lot along the way and I feel my development has benefited from this challenging project. While it took a little longer than expected due to my familiarity with some technology, I'm thrilled to finally have it done!

    I faced several challenges during the project, especially regarding organization, which was a challenging aspect to maintain. However, I believe I managed to do a good job in this regard. It was my first time working on such a large project with multiple technologies, which made it difficult to organize everything and keep the code clean. Even so, I'm confident I did a good job!

    In addition to all the functionality required by the front-end mentor I added:

    • Unit tests and integration tests done with jest & Testing Library!
    • Documentation of components using Storybook!
    • Pre-loading!
    • Keep track of any changes, even after refreshing the browser!
    • Users can drag and drop tasks to change their status and reorder them in a column!

    If you have any suggestions for code improvements, please feel free to share!

    Thanks! šŸ˜Š

  • Submitted


    šŸ‘Øā€šŸ’» Hello everyone!

    I am extremely satisfied with the results of my second Vue project! I have gained a wealth of knowledge and believe that completing this project was an invaluable experience. As for Storybook, I plan to further enhance my understanding and invest more time in fully utilizing this tool. In summary, I am thrilled to have successfully completed this project and to have expanded my knowledge of Vue.

    In addition to all the functionality required by the mentor front-end I added:

    • Pre-loading with Vue Spinner
    • Documentation of components using Storybook
    • Map localization with Leaflet

    If you have any suggestions for code improvements, please feel free to share!

    Thanks! šŸ˜Š

  • Submitted


    šŸ‘Øā€šŸ’» Hello everyone!

    This is my first project using Vue.js and Tailwind CSS, and I'm excited to learn more about these two frameworks. Since this is my first project, I decided to keep it simple so that I can focus on learning without getting too overwhelmed. However, I plan to tackle more complex projects in the near future.

    Built with:

    • Vue.js
    • Tailwind CSS
    • Vite

    If you have any tips on best practices, I would love to hear them!

    Thanks! šŸ˜Š

  • Submitted

    Audiophile ecommerce website w/ NextJs, Typescript, Styled-Components

    #next#redux#styled-components#typescript#axios
    • HTML
    • CSS
    • JS

    2


    šŸ‘Øā€šŸ’» Hello everyone!

    This is, without a doubt, my biggest and best project so far. I am very happy with the result and I believe I did a good job. During development, I faced many challenges as I used technologies I didn't have much experience with, but it was very rewarding.

    In addition to all the functionality required by the mentor front-end I added:

    • Control of items in the cart made with Redux
    • Pre-loading with React Loading Skeleton
    • View the items in the cart even if you refresh the page

    If you have any suggestions for code improvements, feel free to share!

    Thanks! šŸ˜Š

  • Submitted

    PayAPI multipage website w/ (Typescript + React + StyledComponents) šŸ‘¾

    #lighthouse#react#styled-components#typescript#accessibility
    • HTML
    • CSS
    • JS

    1


    šŸ‘Øā€šŸ’» Hello everyone.

    It is with great satisfaction that I express my gratitude for having completed this project. It was a very comprehensive and successful initiative, which involved the creation of a four-page website and represented an excellent test of my skills in building responsive layouts. The site in question is a complete marketing tool, which has personalized form validation.

    I have a strong desire to start larger projects, perhaps exploring different technologies.

    Any feedback is extremely important

    Thanks! šŸ˜Š

  • Submitted

    Results summary component w/ (NextJs + StyledComponents) šŸ‘Øā€šŸ’»

    #axios#next#styled-components#typescript#lighthouse
    • HTML
    • CSS

    1


    šŸ‘Øā€šŸ’» Hello everyone.

    This was my first project with NextJs, I'm very happy with the result and excited to learn more about this framework, however as it is the first project I decided to do something a little simpler, so as not to get too stuck in the development of the project, but in soon I will do some more elaborate project.

    As you can see in the "DESIGN COMPARISON" section, my project has a white bar, this has happened other times, but as you can see it's just in the picture, if you look at the project's deployment it's normal!

    If you know why this is happening, feel free to let me know.

    Thanks! šŸ˜Š

  • Submitted

    Rest countries API w/ (Typescript + React + StyledComponents) šŸ‘Øā€šŸ’»

    #axios#react#styled-components#typescript#react-router
    • HTML
    • CSS
    • JS
    • API

    0


    šŸ‘Øā€šŸ’» Hello everyone.

    Ever since I joined this platform I wanted to do this challenge and I finally did! I'm quite happy with the result of the project, I managed to practice a lot of typescript, and dealing with the data from this API was not very simple, but it was a lot of fun to manipulate more complex objects!

    I added:

    • šŸ‘Øā€šŸ’» Error page if country name does not exist!
    • šŸŽØ Animations during component rendering

    Feel free to suggest code improvements!

    Thanks! šŸ˜Š

  • Submitted

    Github-user-search built w/ Typescript + React + StyledComponentsšŸ‘Øā€šŸ’»

    #react#styled-components#typescript#vite#fetch
    • HTML
    • CSS
    • JS
    • API

    2


    šŸ‘Øā€šŸ’» Hello everyone.

    My first project with Typescript, I really liked it and found it very different. I decided to make a slightly simpler project, so as not to get too stuck in the development, but I will definitely make some more elaborate ones, but this one was definitely a lot of fun to do!

    Thanks! šŸ˜Š

  • Submitted

    Multi-step form built w/ (React + Styled Components) šŸ‘Øā€šŸ’»

    #accessibility#lighthouse#react#react-router#styled-components
    • HTML
    • CSS
    • JS

    5


    šŸ‘Øā€šŸ’» Hello everyone.

    This was a very challenging project, I dealt with a lot of bugs during development and also managed to learn a lot! I'm very happy with the result, I managed to practice a lot of new things, including the use of Hooks. One of the hooks that helped me the most during development was (useEffect), it was perfect for dealing with the side effect and it was also very important for passing form data through components using the Context API.

    I had never used react router before and this was my first time. One tool that helped me a lot to keep my app running smoothly, as well as being able to monitor my project's accessibility and SEO, was the lighthouse!

    I added:

    • šŸ‘Øā€šŸ’» 404 error page
    • šŸŽØ Animations during component rendering

    Feel free to suggest code improvements!

    Thanks! šŸ˜Š

  • Submitted

    Interactive pricing component w/ (React + Styled Components) šŸ‘Øā€šŸ’»

    #accessibility#parcel#styled-components#react
    • HTML
    • CSS
    • JS

    1


    Hello everybody! šŸ‘‹ This is my solution for Interactive pricing component!

    This was my first contact with React, Parcel and styled components!

    I really liked the efficiency and simplicity of parcel, about styled-components I would like to know if the folder organization is good, despite having read a little about it, I still have doubts about the best ways to organize the files!

    I thought it was really cool to develop this project with react, despite being a small and simple project, it was perfect to practice a little with new tools.

    Feel free to leave feedback on how I can improve my code. šŸ˜Š

    Thanks!

  • Submitted

    Url shortening API LP w/ (HTML + SASS + JS + API)šŸ‘Øā€šŸ’»

    #accessibility#sass/scss#webpack#fetch
    • HTML
    • CSS
    • JS
    • API

    0


    Hello everyone. This is my solution for URL shortening API landing page.šŸ‘Øā€šŸ’»

    This was an amazing project, this layout has some exciting features and made me think a little about how I would make it similar to the example layout, and also responsive in all resolutions hahah About all the functionality it was really cool to work with this API, it is not that difficult to use, but we need to take some care because it takes a while to respond, and when storing the data in localStorage this was a problem hahahah. This was my first time storing data in the browser, and I found it quite challenging to think of a solution, but I believe I did a good job, I used JSON.stringify to store my object array with the captured data. To render everything I had to use JSON.parse to be able to access the properties of my objects and generate them on the screen with a function that will be executed when the page loads! Two tools that helped me a lot in the project were Babel and Webpack, I'm recently learning a little more about both.

    I added some details:

    • šŸŽØ Custom Hover
    • šŸ‘Øā€šŸŽØ Custom colored scroll bar
    • šŸ‘Øā€šŸ’» The API-generated links are saved in the browser, even if you refresh or leave the page!

    Feel free to leave feedback on how I can improve my code. šŸ˜Š

    Thanks!

  • Submitted

    Advice Generator App w/ (HTML + SASS + JS + API) šŸ‘Øā€šŸ’»

    #accessibility#fetch#webpack#sass/scss
    • HTML
    • CSS
    • JS
    • API

    3


    šŸ‘Øā€šŸ’» Hello everyone. This is my solution for Advice Generator App.

    This was my first project consuming an API, I learned a lot of things, but I feel that I need to study a little more about it, that is, my next projects will have API integration, after all I need to practice and learn a little more about it!

    Also for the first time using babel and webpack I tried to make my folders as organized as possible, with babel I made my js code accessible to all browsers! and with webpack I compiled all the modules used in the development of the project to the dist folder! feel free to comment on how I can improve the organization!

    I have added:

    • šŸ‘Øā€šŸ’» This API has a mechanism that only accepts a request every 2 seconds, to solve this problem and the user doesn't keep clicking on the button and doesn't see any changes, I added a slightly slower animation!

    Feel free to leave comments on how I can improve my code.

    Thanks! šŸ˜Š

  • Submitted

    Notifications page w/ (HTML + SASS + JS)

    #accessibility#fetch#sass/scss
    • HTML
    • CSS
    • JS

    3


    šŸ‘Øā€šŸ’» Hello everyone. This is my solution for the Notifications page.

    This was a great project to practice organizing my code using ES Modules. I was also able to train how to get data from the JSON file dynamically, that is, if the file is changed and updated with some other notification when the page refreshes we will have another notification!, I still don't know how to make a backend application to send data for JSON, but it would be cool to see it working!

    I added:

    • šŸ‘Øā€šŸ’» I used a file to store all the notifications information and according to the file data and the notification type, I made each one inherit a class for each type, for example, the notification that has a message goes receives its own class and the notification that it has a picture next to it, it will receive its own class customized for its type!

    Feel free to leave comments on how I can improve my code.

    Thanks! šŸ˜Š

  • Submitted


    šŸ‘Øā€šŸ’» Hello everyone. This is my solution for the Calculator app.

    This was a challenging project, I found some very different bugs. I managed to practice a lot of new things and I tried to make my code as clean and readable as possible!

    If you find something I can improve let me know!

    I added:

    • šŸ‘Øā€šŸ’» the user will be able to perform all operations through the keyboard!
    • šŸŽØ Store theme preference via localStorage!

    Feel free to leave comments on how I can improve my code.

    Thanks! šŸ˜Š

  • Submitted


    šŸ‘Øā€šŸ’» Hello everyone.

    This was a really fun project to do, I really liked the colors in both dark mode and light mode, and I'm very satisfied with the layout structure, it was a great way to practice grid manipulation with Bootstrap!

    I have a question for you, how do I make it so that when the burger menu is open, the background is dark?

    I added:

    • šŸ‘Øā€šŸ’» Burguer Menu in the mobile version!
    • šŸŽØ Dark/Light Mode!

    Feel free to leave comments on how I can improve my code.

    Thanks! šŸ˜Š

  • Submitted

    Tip calculator app w/ (HTML + SASS + JS) šŸ‘Øā€šŸ’»

    #accessibility#bootstrap#sass/scss
    • HTML
    • CSS
    • JS

    2


    šŸ‘Øā€šŸ’» Hello everyone.

    This was an excellent challenge to train and improve my knowledge with js! I tried to make my code as clean and readable as possible! If there's anything I can improve on this, I'd love to know!

    I added:

    • šŸ‘Øā€šŸ’» messages if fields are not filled in correctly!
    • šŸŽØ Added a loading animation while the page doesn't load!

    Feel free to leave comments on how I can improve my code.

    Thanks! šŸ˜Š

  • Submitted


    šŸ‘Øā€šŸ’» Hello everyone.

    DAY 7/7 šŸŽ‰šŸŽŠ

    Finally the end ahuauha, I can't describe how productive this week was, I learned a lot of new things and managed to practice a lot! Within what I learned the two most important things are:

    • Bootstrap
    • SASS

    Plus my javascript skills have improved a lot!

    Anyway, I leave a tip for those who want to improve, whether with a developer or anything else, persist! Resist the challenges that the world will put in your life, and most importantly learn from them, I guarantee you that at the end of the day all the effort will be worth it.

    After this week I feel like I can learn anything, after all, it only depends on me!

    I added some details:

    • šŸ‘Øā€šŸ’» Custom menu bugger!
    • šŸŽØ Custom colors and hover!
    • šŸ‘Øā€šŸŽØ Dark/Light Mode!

    Feel free to leave comments on how I can improve my code.

    Thanks! šŸ˜Š

  • Submitted


    šŸ‘Øā€šŸ’» Hello everyone.

    DAY 6/7

    this was a challenge that I really enjoyed doing, it was my first project with mobile-first, and it helped me a lot in terms of productivity! Maybe I'll use it in a few more projects!

    I added some details:

    šŸ‘Øā€šŸ’» button to see the password being entered!

    Feel free to leave comments on how I can improve my code.

    Thanks! šŸ˜Š

  • Submitted


    šŸ‘Øā€šŸ’» Hello everyone.

    DAY 5/7

    This was an interesting challenge to do, it was my first bootstrap project, so if you find any bugs or a way I can improve my code, feel free to let me know.

    The boostrap really helps in the development of the layout, but there are times that the scss code you write from (conflict) with the bootstrap, this is pretty annoying, I know I can change the bootstrap source codes if I download it, but that It also takes time, in short, I need to train more.

    Feel free to leave comments on how I can improve my code.

    Thanks! šŸ˜Š

  • Submitted


    šŸ‘Øā€šŸ’» Hello everyone.

    DAY 4/7

    I remember not being able to do this challenge a few weeks ago, despite being an easy challenge I ended up complicating it a lot and leaving the code very confusing, I adopted best practices and managed to have a good result! I really liked the result!

    I managed to improve my js a lot, and with this challenge, I'm looking forward to more complex challenges.

    I was having doubts about how to use the addEventListener method in a variable that contained more than one element of the same type, with this one I managed to solve the problem!

    btns.forEach(rate => {
        rate.addEventListener('click', () => {
            res.innerHTML = rate.value
        })
    })
    

    I added some details:

    • šŸ‘Øā€šŸ’» Button to go back and rate again!
    • šŸ‘Øā€šŸŽØ Card animation going in and out!

    Feel free to leave comments on how I can improve my code.

    Thanks! šŸ˜Š