Hey, are you learning javascript and ever thought 'How commercial react projects were developed?', 'How difficult it could be to build such large applications?', etc. These questions used to come to my mind when I have started learning React. In September 2020, I got an opportunity to work on the company's web application as a front-end development intern. I have explored many things while working on it and sharing some of those things with all of you.
Here are some points which I have noticed while working on the project -
- Tools used for development
- Project file structure
- Libraries used in the project
- API
- Coding Conventions
- Functional component over class components
- Styling of components
- Deployment
Let's explore all of these -
Tools used for development :
On the very first day of the internship, the team asked me to share Github id. They granted me access to a private Github repository and assigned task on JIRA. Github was used for hosting the Git repository by the team. The whole software development was going in a distributed way using Git. Git is a distributed version control system. JIRA is an issue and project tracking software that was used to assign issues to team members on which they were going to work. Also, we used Postman to check responses from API for particular requests. I have used sublime text 3 code editor for writing code.
File Structure :
The project repository is structured very systematic way. The frontend is totally separated from the backend. In the source folder, there are separate folders for assets, components, containers, services, utils, store, etc. Every component file is stored in a different folder with the same name along with its CSS file. Sub-components are placed inside the component folders in the same way. All assets are placed into the assets folder.
Libraries used :
When I checked for dependencies I get to know that only the libraries which are really essential are used. Oversizing of the project is avoided by reducing dependencies and no components or styling library used. Libraries like Axios, React Router, etc are used in the project.
API :
If you want to be a software developer, you must know how to handle APIs. Every piece of data was fetched from or sent to the backend using valid API calls.
Coding Conventions :
This is the most important part, you should know how to write code that others can understand. We used camelcase for naming variables and functions. Class names and ids of tags were relevant. The code was commented at necessary places. Opening braces were placed on the same line while closing braces are on the new line exactly under their respective opening braces.
Functional components over Class components :
As Tanay already told in the workshop that mostly functional components are used in projects nowadays, I already guessed that project will have all functional components. My guess was perfect; the project had all the functional components.
Styling of components :
As I mentioned before no components or styling library was used, all components were styled using pure CSS. It is sometimes difficult to write CSS for a given design but if you are good at googling stuff and searching StackOverflow you won't face any problem.
Deployment :
The frontend of the project is hosted using Netlify service as it provides continuous deployment from your production branch of Github repository.
These things I have noticed while working on a commercial web application project. What other things did you experience while working in the industry? Let me know in the comments below.
Top comments (2)
Thank you a lot. Awesome Experience.
thanks for sharing