Table of Contents

1. Back-End Technologies.............................................................................................................................3
A. Used Frameworks | DBMS | Libraries:...............................................................................................3
B. Naming Conventions...........................................................................................................................3
C. Questions & Answers:.........................................................................................................................4
I. Why did we choose NodeJS?..............................................................................................................4
II. Why not Django?.............................................................................................................................4
III. Why not NestJS?..............................................................................................................................4
IV. Why Express?..................................................................................................................................5
V. Why not SQL?.................................................................................................................................5
VI. Why NoSQL?..................................................................................................................................5
VII. Why these naming conventions ?....................................................................................................5
VIII. Why MongoDB not Cassendra?...................................................................................................6
IX. Unit Testing.....................................................................................................................................6
2. Front-End Technologies.............................................................................................................................7
A. Used Frameworks/Technologies/tools/libraries:.................................................................................7
B. Naming Convention:...........................................................................................................................7
C. Questions.............................................................................................................................................7
D. Answers...............................................................................................................................................8
I. React JS...............................................................................................................................................8
II. Technical Analysis...........................................................................................................................9
III. Angular............................................................................................................................................9
IV. Tailwind...........................................................................................................................................9
V. Bootstrap........................................................................................................................................10
VI. Naming Conventions.....................................................................................................................10
VII. Jest.................................................................................................................................................10
VIII. Mocha/Jasmine...........................................................................................................................10
IX. React Docgen.................................................................................................................................10
1. Back-End Technologies
A.Used Frameworks | DBMS | Libraries:
NodeJS (JavaScript runtime environment)
NPM (Package Manager)
MongoDB (database management system)
Mongoose (library built on top of Mongo)
Jest (Testing)

B.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)
C.Questions & Answers:
I. Why did we choose NodeJS?
According to Figure (1). NodeJS is the most popular back-end library, with 42.65% 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.

Figure 1: sTACK Overflow Developer Survey

Node.js comes with NPM, a powerful package manager that provides access to a vast ecosystem of
open-source libraries and frameworks.
Node.js is built on an event-driven, non-blocking I/O model, making it efficient for handling concurrent
connections and building scalable applications.
Node.js has a large and active community of developers, providing resources, tutorials, and support.

II. Why not Django?

Unable to handle multiple requests at once while Nodejs can do which our project need.
Django's performance is low compared to more lightweight frameworks. This can be a concern for
applications that require extremely high performance or have strict latency requirements.

III. Why not NestJS?

Performance Overhead: Due to its additional abstractions and features, NestJS may introduce a slight
performance overhead compared to Express.js. The additional layers of abstraction and the use of
decorators and dependency injection can impact the overall performance of the application, especially in
high-performance scenarios.
IV. Why Express?
Simplicity: Express offers a minimalist and intuitive API, allowing developers to focus on clean and
concise code without unnecessary complexity.
Middleware: Express has a robust middleware system for adding modular and reusable functionality to
applications, such as request parsing, authentication, and error handling.
Routing: Express provides a flexible routing system for handling different types of requests and
implementing RESTful APIs, with support for route parameters and query parameters.
Integration with Node.js ecosystem: Express seamlessly integrates with other Node.js modules and
libraries, leveraging the vast ecosystem of packages and tools available.
Performance: Express is lightweight, efficient, and designed for high concurrency, making it suitable for
large-scale applications and performance optimization techniques.

V. Why not SQL?

Rigidity of Schema: SQL databases require a predefined schema, making it inflexible for evolving or
dynamic data structures.
Scalability Challenges: Scaling SQL databases horizontally can be complex, especially with large data or
high traffic loads.
Performance Impact of Joins: Complex joins on large datasets can impact performance and require
careful optimization.
Limited Support for Unstructured Data: SQL databases are not well-suited for handling unstructured or
semi-structured data.
Lack of Flexibility in Data Modeling: SQL databases enforce a rigid structure defined by the schema,
making it challenging to accommodate changes in data requirements.
In our project we need flexible schema, high performance DBMS

VI. Why NoSQL?

Flexible Data Model: NoSQL databases offer a flexible schema-less design, accommodating
unstructured or evolving data structures.
Scalability: NoSQL databases scale horizontally, distributing data across multiple servers for handling
large amounts of data and high traffic loads.
High Performance: NoSQL databases prioritize performance, optimizing read and write operations for
fast data retrieval and processing.
Schema-less Design: NoSQL databases eliminate rigid schemas, allowing for easier data modeling and
manipulation.
Our Project doesn’t need very complex queries which is the best advantage of SQL.

VII. 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)

VIII. Why MongoDB not Cassendra?

Complexity of Data Modeling: Cassandra's data modeling can be more complex compared to MongoDB.
It requires careful consideration of data partitioning, denormalization, and query patterns to optimize
performance. MongoDB, on the other hand, offers a more straightforward and flexible data model.
Limited Querying Flexibility: Cassandra's query language (CQL) is designed for distributed databases
and may have limitations in terms of querying flexibility compared to MongoDB's rich query language.
MongoDB provides a wider range of querying operations, including advanced filtering, sorting, and
aggregation capabilities.

IX. Unit Testing

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
2. Front-End Technologies
A.Used Frameworks/Technologies/tools/libraries:
ReactJs. (Java script library)
Tailwind. (CSS Framework)
Npm. (Package Manager)
Jest. (Testing)
React Docgen. (Document Generator)

B.Naming Convention:
Files, Components: Pascal Case
Components instances: camelCase
CSS classes: flat case (all lowercase)
Constants: Screaming Snake case (Ex: API_URL)
Utility functions: camelCase
Props: camelCase & Pascal Case for React Components
Variables: camelCase
Handlers: handleEvent or handleComponentEvent (e.g. handleCommentSubmit)

C.Questions
Why did we use React?
Why not Angular?
Why Tailwind?
Why not Bootstrap?
Why those naming convention?
Why Jest for unit testing?
Why not Mocha/Jasmine for unit testing?
Why Docgen?
D.Answers
I. React JS
React is a wide used Java script library our current life, we chose it based on the facilities the library will
give us technically for this project, and what it will give as an experience, such experience can help us in
the market nowadays, we will first take a look on the market analysis of front-end developers.

 Market analysis

Figure 2: Stack overflow survey on most common web technology

According to Figure (2), React is the most popular front-end library. It has a large community and
ecosystem.
According to Figure (3), you can see that React is widely used nearly 80% of the Front-end developers
use, either in work, school, or for freelancing.
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.
Based on LinkedIn data and industry research, React is the most popular and in-demand front-end
technology.
 Figure 3: Ranking of Usage Over Time

II. Technical Analysis

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.
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.

III. 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.

IV. Tailwind
Utility-first approach: 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.
 V. 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 customize.
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.

VI. Naming Conventions

We searched some articles and found that these are the most famous best practices by experienced
people, you will find in the references those articles.

VII. 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.

VIII. 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.

IX. React 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.