Used Frameworks | Tools | Libraries

- React (JavaScript Library)

- Tailwind (CSS Framework
- Npm (Package Manager)
- Jest (Testing)
- React Docgen (generating documents)

Naming Conventions
- Files, Components: PascalCase
- Components instances: camelCase
- CSS classes: flat case (all lowercase)
- Constants: Screaming_Snake_case (Ex: API_URL)
- Utility functions: camelCase
- Props: camelCase & PascalCase for React Components
- Variables: camelCase
- Handlers: handleEvent or handleComponentEvent (e.g. handleCommentSubmit)

Why did we choose React?

- According to the Stack Overflow Developer Survey 2023, React is the most popular
front-end library, with 40.58% of respondents saying they use it. It is also the most
wanted front-end library, with 35.25% of respondents saying they would like to learn
it
 - React has a large and active community, with over 1.5 million contributors on GitHub.
This means that there is a wealth of resources available to React developers,
including tutorials, documentation, and libraries
- React also has a large ecosystem of third-party libraries and tools. This makes it
easy to find the right tools for the project, without having to reinvent the wheel
- React's component-based architecture enables developers to break down their user
interfaces into small, reusable components. This makes it easier to develop,
maintain, and scale large and complex UIs
- Based on LinkedIn data and industry research, React is the most popular and in-
demand front-end technology
- React has a shallow learning curve and most of us have already started learning it
- React uses a virtual DOM, which is a lightweight representation of the actual DOM.
This allows React to efficiently update the UI when there is a change in the data
without having to redraw the entire page. This makes React apps fast and responsive

Why not Angular?

- React apps are generally faster than Angular apps because of the virtual DOM.
- React is fast, efficient, and is growing in popularity because it is lightweight and
suitable for mobile native

Why Tailwind?
- Tailwind CSS uses a utility-first approach, which means that it provides a set of low-
level CSS utility classes that can be combined to create any design. This means a lot
of control over CSS and makes it easy to create custom designs

Why not bootstrap?

- Bootstrap uses a component-based approach, which means that it provides a set of
pre-built CSS components. This can make it easier to get started with Bootstrap, but
it can also be less flexible in some cases
- Bootstrap comes with a built-in design system that can be difficult to customise
- Tailwind CSS is generally faster than Bootstrap. This is because Tailwind CSS
produces smaller and more efficient CSS files
- Tailwind CSS is easier to learn than Bootstrap. This is because Tailwind CSS has a
simpler and more intuitive API

Why these naming conventions ?

- We searched some articles and found that these are the most famous best practices
by experienced people
- These are the links:
- https://climbtheladder.com/10-react-naming-conventions-best-practices/
- LinkedIn
- javascript/react at master · airbnb/javascript (github.com)
Why Jest?
- Jest comes with built-in features like mocking, code coverage, and snapshot testing,
so we don't need to set up additional tools or configurations to start writing tests
- It has gained significant popularity in the React community. As a result, it has a large
and active community that can provide support, share best practices, and contribute
to the tool's development.
- It has a "zero configuration" philosophy, meaning it works well with React projects out
of the box without requiring extensive setup. It automatically detects your test files
and runs them, making it easier to get started with testing.

Why not other testing tools e.g. Mocha/Jasmine?

- Jest has a simpler and more intuitive API compared to Mocha and Chai. They
provide a declarative and straightforward syntax that makes it easier to write and
read tests.
- Jest is an all-in-one testing framework with features like mocking, assertion, and
code coverage analysis, While Mocha is a more lightweight framework that focuses
on providing a flexible test runner and letting you choose your assertion library and
mocking library.
- While both Jest and Jasmine are capable testing frameworks, Jest may be a better
choice for more complex testing scenarios due to its richer feature set and faster
execution speed.
- Source: www.browserstack.com/guide/jest-vs-mocha-vs-jasmine

Why Docgen?
- React Docgen automates the process of generating documentation for components.
saving us the time of writing and maintaining documentation manually.
- The generated documentation from React Docgen provides a clear and standardised
format for understanding and using the components. It includes information about
props, prop types, default values, and other relevant details.