- Gyanendra Kumar Knojiya
You'll need experience with both front-end and back-end programming to be a great web developer. Implementing a full-stack project would help you master HTML and CSS while refining your programming capabilities related to:
- Servers (using PHP, Python, Node, etc.)
- Database (using SQL, SQLite, MongoDB, etc.)
List for projects:
It is a React-based web app that automatically recommends news based on user logs. Basically, TapNews collects news from a variety of sources and applies machine learning to suggest topics. It removes duplicates using the TF-IDF algorithm and predicts news topics using TensorFlow CNN. Further, JSON-RPC aids communication between multiple backend services.
This project uses a Node.js server with Express and Next.js for the React application. It serves as a solid boilerplate for large-scale projects and comprises a simple folder organization structure. Fullstackinator incorporates Redux for global state management and a Typescript setup in both server and client files. So, you can check out this open-source project to gain more clarity about the workings of Node.js, Next.js, Typescript, Redux, and styled components.
PostVapoRS refers to full-stack with PostgreSQL, Vapor, React, and Swift. This GitHub project also the following tools of backend and front-end development:
- Popper, etc.
This project is quite similar to the above idea, but it uses MongoDB instead of PostgreSQL. You can replicate MongoVapoRS to familiarize yourself with database development, database drivers, application frameworks, and libraries. So, access the code and practice away!
5. Full-stack PPM too
You can find the code of this personal project management tool here, freely available on GitHub. It has been built using React and SpringBoot. The full-stack-ppm-tool project has the following functionalities: Features of user registration and login User authentication via JWT Token CRUD operations
This innovative project enjoys a large community of contributors. CodingAI is an excellent example of a full-stack application that enables developers to find mentors related to their technology stack. Its comprehensive project documentation can help you learn about React, CSS, Redux, and responsive development.
7. Item Catalog
A typical item catalog project provides a list of items under different categories and consists of user registration and authentication system. This GitHub repository includes all these features and covers them in detail. The item catalog project has been built with HTML5, Bootstrap, SQLAlchhemy, Vagrant, and Flask. It also allows OAuth2 social login with Google and Facebook. Upon logging in, users can select specific items to gather product information. They can also add, edit, and delete item information. Upon logging out, the home page appears blank, with no items added. The project also indicates possibilities of improvement in the layout design and implementation of CSRF protection on CRUD operations. If you already have some experience in this area, this could be worth attempting.
8. Full-stack tutorial
Feel is an open-source application offering a progressive solution to tackle the issue of human anxiety. It connects people who have gone through similar life situations and indicates posts related to books, food, games, movies, and music. In this manner, it creates a safe space for sharing problems and even providing a daily distraction to some people. Here is a look at the technical content of the Feel application: Back end: NodeJS, Express, and MongoDB Front end: ReactJs and several other dependencies Mobile: Expo and React Native
10. Berlin Neighborhood Map
It is a single-page web application showcasing a map of your neighborhood. With this map project, you highlight places, identify popular spots with map markers, add third-party data, and include a search function and list view of all locations. You can refine your KnockoutJS and Google Maps API skills by replicating the code of this project.