Takenote github7/26/2023 So, the code structure is not organized using different folders. Write with me is a real-time collaborative markdown editor written in React with hooks and it uses AWS Amplify So instead of calling axios directly in the component, he uses a service function instead. What I find interesting is that it has a services folder (remind me of angular) where each file is an abstraction to make API calls. Tomato-work is a personal affairs management system written in React using hooks and redux:įor the UI, it uses Antd, which is pretty awesome BTW. It uses D3 to draw the chart and hooks! It is a small app but it is a good start to learn how to use hooks in calculator-like applications. Mortgage is a mortgage overpayment calculator! He used context and didn’t use redux (yes, you don’t always need to use redux). Karl Hadwen did this Todoist clone, and he even has a video tutorial on Youtube.įor the “backend”, he used Firebase instead of building an API from scratch. What I find interesting in this project is the code structure:Īt first, it seems pretty standard but after reviewing the reducer ( store/reducer.js) I noticed that they are “grouping” (inside application folder) some components and styles alongside the redux logic: This project uses redux (without redux-toolkit) and hooks. The README is in Chinese but the code is in plain English. This is a clone of NetEase, a cloud music streaming service. If you want a Codebase Tour, you can see it here. What do I mean by “feature-based project structure”? Well, it has a “feature” folder where you can find a “issues” and “projects” folder:Īnd inside each folder, you can find the components, api, and types: It’s built with Next.js, a feature-based project structure, and lots of tooling like ESLint, Prettier, TypeScript, Cypress, and Storybook. The application is an error logging and monitoring tool similar to Sentry or Rollbar, built by Johannes Kettmann. It uses React hooks (yay!) and redux-toolkit =) (see the slices folder). Without all the fancy stuff that we don’t need :) It’s a simple plain-text take note app with markdown support. Take Note is an open-source project to take notes, known as The Note Taking App for Developers So, no matter if you already have hit a plateau as seasoned developer or if you’re just starting, take a look! 1) Take Note – Live | Repo All uses modern features such hooks, context and many uses redux-toolkit. That’s why I made this list of open-source React.js applications you can learn from. How they approach their projects can teach you lessons that maybe will take you weeks to learn. One way to improve your skills is to study what other devs are doing. What if you want to know how to structure a medium to large codebase? Or if you want to know if you are doing everything fine? And many of them have “outdated code” (no hooks, class components everywhere, etc). As you grow your knowledge in React.js, you will notice that there are many sources with simple code examples but only a few of advanced stuff.
0 Comments
Leave a Reply. |