Here is my solution for the frontend-quiz challenge. To challenge myself, I decided to build the application with React-router to catch the following scenarios
Question skipping
Bad route navigations
Passing data between routes.
You can find the full breakdown of my implementation in the README.md in the repository. Any feedback on the following would be appreciated
General project structure
React router configuration
Accessibility best practices.
Thank you for taking the time to check out my solution, happy coding!
Hey! This is my solution to the Space tourism challenge. I wanted to use this project as a chance to test Next JS 13 before I use the framework to create something big. Overall I had a pleasant experience with the app router, however I found the development experience a bit slower compared to the previous iterations of Next JS.
One other thing that I hope someone can help me solve, some CSS styles/properties disappear after a few route navigations. For example, the margin-block-start on the main content of the home page will no longer be there after 3-4 page navigations. I couldn't see anyone else having this issue, so if anyone can get me some points that would be awesome!
Some other things I would like feedback on include:
The style system, I tried to create consistent styling by placing much of the styling information in global variables. I found that maybe I did too much for the font-structuring.
Accessibility, I've recently been reading about accessibility and implemented a few things I have learned so far.
Project structure, since this was my first time using the app directory, I would like to know what other ways you have organized the project.
Thank you for taking the time to read this (sorry for the long text), happy coding!
Hello! This is my solution for the multi-step-form challenge. When breaking down the project, there was two goals I wanted to achieve:
Data should persist between pages, meaning user's can switch back and forth between pages and see the data they had previously inputted.
Every form should be easily validated.
This led me to use Redux as the global store to hold the state of the entire form, while react-hook-form handled the state of each form section and provided validation. The application is thoroughly tested using Cypress and a continuous integration/deployment pipeline is created using GitHub Actions.
One thing I would like to add in the future is a simple transition between each form section.
For a full breakdown of the application development, please see the README.md in the project repository page.
Hello! This is my GitHub user search application made with React, TypeScript, SWR, and bootstrapped using Vite. I had originally completed this challenge a year prior, but thought it would be a good review to go back and fix some of my earlier work that was made during my initial phases of learning.
Some of the main differences between this version and the original include:
Use of Vite over Create-React-App
Use of SWR for query state handling rather than the Fetch API
Use of end-to-end test and a continuous integration and deployment pipeline.
A full description of the implementation of the changes can be found in the README of the repository. Happy learning!
Hello! This is my solution to the Planet site challenge, this is my second submission! I was able to get some great feedback on my first solution and implemented the following fixes:
Close the menu when a user navigates to a new page.
Update some packages due to vulnerabilities.
Update the application version to 1.0
Full solution description can be found in the README.md of the repository. If you have any feedback please feel free to share!
Hello, this is my solution to the BMI calculator challenge. This project is boostrapped with Vite using the React/Typescript template and is styled using Styled-Components.
Some of the feedback I am looking for include:
Project organization and structure
Use of Styled-Components and how to be more "re-usable"
Accessibility
Better testing practices
Please visit the repository to view the README and see more information about the project development.
Hello, this is my solution to the news homepage challenge. Overall this project was simple and I did not face many development challenges while building the page.
One goal I aimed to achieve was to get a good refresh on my SCSS skills. I exclusively use CSS modules and Styled-Components in most of my projects, but I wanted to see if SCSS was still a good tool to use in the modern development environment.
Any feedback on my project organization, SCSS use, and accessibility practices would be greatly appreciated.
Hello, this is my solution to the dictionary application built with React, TypeScript, SWR, and Styled-Components. End-to-end testing handled with the Cypress testing library.
Any feedback on my project organization, testing practices, and performance would be greatly appreciated.
This project gave me a better understanding on how to use the SWR library to make http request in client components in React. I've used other libraries such as React-query before, so getting experience with other another tool was a great learning experience.
The Axios library is used to make the HTTP request in the fetch function that is called by the `useSWR' hook .
This was the biggest challenge from FrontEndMentor that I have taken so far. The initial requirements stated to just create the user interface with the JSON provided, but I decided to take it a step further by building a full-stack web application with authentication built with GraphQL for the server side and React for the client side.
A homepage was created to replicate the feel of a website such as Netflix or Hulu.
A test user has been created so anybody can login without having to sign up.
Please view the project README for my full breakdown of the project and the development process.
Hey 🙋♂️, this is my planet facts website built with Next JS and deployed with GitHub actions & Vercel. This is my first time building something with Next JS so any feedback is appreciated !
Somethings that I am looking for feedback on include:
Next JS project organization, are there better ways to organize my project?
CSS Modules, should I have broken down the id.tsx page to smaller components to reduce the overall sizes of my CSS module files?
Markdown editor built with React, Redux, Redux-toolkit, and styled components. End-to-end testing completed using Cypress.
The requirement of the project is to create a markdown editor web-application that is capable of the following:
Create markdown and see a preview of the markdown rendered updated in real-time
Save created markdown documents
Switch between saved markdown documents
Modify saved documents and delete documents as well
The web browser Local Storage API is used to save documents in local storage.
I originally bootstrapped the project with create-react-app, but after using Vite for other projects I decided to migrate rebuild the project with a react-typescript vite configuration.
s the first project I tackled that really required me to use state management tool to read and control the application state.
Please see the README for the development process I went through while creating this, it will continue to be updated in the coming weeks.
Any feedback about my general code structures, use of styled components, and any refactoring tips would be greatly appreciated!
Password generator that allows users to generate random passwords based on a set length and the following properties
uppercase letters
lowercase letters
numbers
symbols
One of my main struggles was creating my own implementation of generating a random password, I did come up with a few solutions but they were not perfect, after a bit of research I found a package which handled this easily for me.
For greater details about the development process please see the README in the repository.
Any feedback about my use of CSS modules and Cypress would be greatly appreciated!
I added a loading spinner and a 5 second delay to give the effect that the form is processing credit card information.
This project was deployed with Vercel, using GitHub Actions for continuous integration/deployment. No unit testing, but end-to-end testing was implemented with Cypress.
Any feedback is greatly appreciated, especially for accessibility issues.
I also noticed that the transition from the form to the loading spinner has the form appear for a split second before the gif comes in. Any tips on handling animations like these on CSS would be great!
Memory game built with React and Typescript, with help from React Redux and styled components. I also used Cypress to test various parts of the application.
I would love some feedback on how to better organize my project structure, and any ways to better optimize the application. For example, because I run a function that checks if a game tile should be disabled on every render, this causes the count timer to be held up on single player mode. I plan to fix this in the future.
Again, any feedback would be greatly appreciated. Happy Coding!
Hello! This is my 2nd attempt at this challenge, this time with my newly found knowledge of React, TypeScript, and continuing to develop my styled components skills.
I would like feedback on my use of TypeScript and React and better ways to handle aspects of my code, one thing I think would have been better is to use UseContext to pass down my setTodo functions and state down instead of having to directly to pass it down through each component with props.
Hello! This is a simple tip calculator app I made using regular HTML, SCSS, and JavaScript. I used tools like webpack to help the build process, and used the test runner Jest since I have been learning about JavaScript Testing and design patterns recently.
Any feedback would be great! I am looking more into design patterns so I can better learn how to better structure my projects, so anything about that would be great as well!
Here is my solution for this challenge, I would like some feedback on how I organized this project and how it could be better.
Some things I wish to add in the future:
Numbers in thousands place have commas in correct places.
User can keep typing in expressions after getting answer.
This one was pretty challenging! Especially figuring out how to place to elements on top of each other to create the flip effect.
An issue with my final product is that sometimes the seconds time card would get mismatched (fixed on next iteration) and if you leave the tab and come back the time will no longer be synced.
Decided to use the Sass 7-1 architecture, though it was easier to separate things it still feels like I could have done better with separating components, etc.
If anybody would like to review my JavaScript code and give me feedback that would be great! I used the revealing module pattern to better separate the task list data from the DOM manipulation!
Any other type of feedback is appreciated as well! Thank You!
