A website is a collection of web pages and related resources that are accessible through a web browser over the internet. It is typically designed to provide information, services, or interactive content to users. A website comprises several key components, including the frontend, backend, and database, each with distinct roles and responsibilities. 1) Frontend 2) Backend 3) Database.
https://cs.fyi/guide/how-does-internet-work
The frontend is what the user sees and interacts with. It includes the visual design, layout, and content that is displayed in the browser. The frontend is built using HTML, CSS, JavaScript, and frontend frameworks like React or Angular. It takes data from the backend and presents it visually to the user.
-
1.1) HTML/CSS/JavaScript : Frontend developers use HTML (Hypertext Markup Language) for structuring content, CSS (Cascading Style Sheets) for styling, and JavaScript for adding interactivity and dynamic behavior to web pages.
-
1.2) UI Frameworks and Libraries : Frontend developers often utilize UI frameworks and libraries like React, Angular, Vue.js, or Bootstrap to streamline the development of responsive and visually appealing user interfaces.
-
1.3) User Interface (UI) : The frontend is the user-facing part of a website that users interact with directly. It consists of web pages, layouts, and user interfaces designed to present information and enable user interactions.
We use Vite JS and Next JS as Frontend Frameworks. For Stylling We are using Tailwind CSS or Chakra UI Depending upon the Nature of the Work. Time and Helping Material will be Provided by the Team Lead for Re-Adjustment of styling framework.
Reference : https://youtu.be/9He4UBLyk8Y
The backend is the part of a website that runs on the server, responsible for handling core functionality and business logic. It comprises several crucial components and technologies.
- 2.1) Web Server : A web server is a pivotal software or hardware component that manages incoming requests from web browsers and serves web content. It plays a crucial role in processing requests, routing them to the appropriate resources, generating responses, and ensuring secure communication using the HTTP protocol. Additionally, web servers manage security, logging, and often employ load balancing for handling high traffic. Web servers, like Apache, Nginx, and Microsoft IIS, form a critical part of the internet infrastructure, facilitating the delivery of web pages, images, videos, and more to users' browsers.
Reference : https://youtu.be/9J1nJOivdyw
-
2.2) Programming Languages : Backend developers harness programming languages such as PHP, Python, Ruby, Java, and others to build the server-side components of websites. These languages enable developers to implement intricate server logic and data processing.
-
2.3) Frameworks : Frameworks like Node.js, Django, Rails, and many more provide structured environments for building robust web applications. They streamline development, offering pre-built modules and tools for common tasks.
-
2.4) APIs (Application Programming Interfaces) : Backend developers craft APIs to expose functionalities and data to the frontend and other applications. APIs act as intermediaries, enabling seamless communication between the user interface and the server. They can be designed using RESTful principles or employ alternative protocols like GraphQL.
-
2.5) Authentication and Authorization : Security is paramount in backend development. Backend developers implement authentication and authorization mechanisms to safeguard data and restrict access to authorized users. These measures ensure that sensitive information remains protected from unauthorized access or malicious actions.
Currently , We are using Nest/Express/Node JS and FAST API for Backend Devolpment with REST API. We are Planning to Extend it to learning GraphQL API etc too.
The database stores, organizes and manages all the data for the website. It can be a relational database like MySQL, PostgreSQL or a NoSQL database like MongoDB. The backend queries and manipulates data in the database via CRUD (create, read, update, delete) operations. The frontend then displays this data to the user in a readable format.
Supabase uses PostgreSQL, an open source relational database for storing data. PostgreSQL offers:
- Relational data models with tables, indexes, keys
- Scalability, reliability, and a robust feature set
- Easy integration with Supabase APIs
The backend interacts with the Supabase PostgreSQL database for CRUD operations using SQL queries, the Supabase client library or other ORM tools.