# Brynk Labs Reference Document

**Objective:** To develop a responsive website for Company ABC with a dynamic heading controlled via a CMS. The assignment aims to demonstrate skills in front-end development (pixel-perfect design from Figma), back-end development (API creation and database interaction), and full-stack integration (CMS-driven content update). The expected learning outcomes include proficiency in responsive design, database management, API development, and content management system integration.

**Step-by-Step Instructions:**

**Project Setup and Initialization:**

1. **Create a Project Directory:** Create a new directory for the project. Name it appropriately (e.g., `abc-company-website`).
2. **Initialize the Project:** Depending on the chosen technologies, initialize the project. For example, if using Node.js and React, run `npm init -y` followed by `npx create-react-app client` in the root directory, or equivalent commands for your preferred stack.
3. **Install Dependencies:** Install necessary dependencies for both the front-end (client) and back-end (server). This might include React libraries (e.g., styled-components, axios), server-side frameworks (e.g., Express.js), database drivers (e.g., Mongoose for MongoDB, Sequelize for PostgreSQL), and any other required packages. Use `npm install` or `yarn add` for Node.js projects, or equivalent package managers for other environments.
4. **Database Setup:** Set up a database (e.g., MongoDB, PostgreSQL, MySQL) on a local or cloud-based service. Configure database connection details (URI, username, password) to be used in the back-end application.

**Development Process:**

1. **Front-End Development (ABC Company Page):**
* **Figma Design Implementation:** Translate the provided Figma design into HTML and CSS using a front-end framework like React. Prioritize achieving pixel-perfect accuracy.
* **Component Structure:** Break down the landing page into reusable components for better organization and maintainability.
* **Static Content:** Hard-code all static text and elements as specified in the Figma design.
* **Dynamic Heading Placeholder:** Create a placeholder for the dynamic heading that will be fetched from the API.
* **API Integration (GET):** Implement a GET request to fetch the heading text from the back-end API. Update the heading placeholder with the retrieved data.

2. **Back-End Development (CMS and API):**
* **Framework Setup:** Set up a back-end framework Spring Boot
* **Database Model:** Define a database model (e.g., using any sequential Database (SQL.etc...) to represent the heading text. The model should have at least one field for storing the heading string.
* **API Endpoints:** Create two API endpoints:
* **POST Endpoint:** This endpoint will receive the heading text from the CMS page and save it to the database.
* **GET Endpoint:** This endpoint will retrieve the heading text from the database and return it as a JSON response.
* **CMS Logic:** Implement the logic to handle incoming POST requests, validate the data, and save it to the database.
* **API Security:** Implement basic security measures like input validation to prevent malicious data from being stored in the database.
3. **CMS Page Development:**
* **Design and Layout:** Create the CMS page based on the provided wireframe or your custom design.
* **Text Field:** Implement a text field where the user can enter the heading text.
* **Save Button:** Add a button to trigger the saving of the text to the database.
* **API Integration (POST):** Implement a POST request to send the entered heading text to the back-end API when the save button is clicked.

4. **Integration and Testing:**
* **Connect Front-End and Back-End:** Ensure that the front-end application can successfully communicate with the back-end API to fetch and display the dynamic heading.
* **Test API Endpoints:** Thoroughly test both the POST and GET API endpoints using tools like Postman or Insomnia.
* **Test CMS Functionality:** Test the CMS page by changing the heading text and verifying that the changes are reflected in the ABC Company page in real-time or near real-time.
* **Responsiveness Testing:** Test the responsiveness of the ABC Company page on different screen sizes and devices using browser developer tools or dedicated testing tools.

**Styling and Design:**

1. **CSS Framework or Library:** Choose a CSS framework (e.g., Bootstrap, Material UI, Tailwind CSS) or library (e.g., styled-components) to assist with styling and ensure consistency.
2. **Figma Design Replication:** Use the Figma design as a guide to replicate the visual elements, typography, colors, and layout of the landing page.
3. **Responsive Design:** Implement responsive design principles using media queries or a responsive CSS framework to ensure that the website adapts to different screen sizes.
4. **Cross-Browser Compatibility:** Test the website on different web browsers (e.g., Chrome, Firefox, Safari, Edge) to ensure cross-browser compatibility.

**Deployment:**

1. **Choose a Hosting Platform:** Select a hosting platform for both the front-end and back-end applications. Options include Netlify, Vercel, AWS, Google Cloud, Heroku, or a VPS.
2. **Front-End Deployment:** Deploy the front-end application to the chosen platform. This might involve building a production-ready version of the application and configuring the hosting platform to serve the static files.
3. **Back-End Deployment:** Deploy the back-end application to the chosen platform. This might involve setting up a server environment, configuring the application to connect to the database, and deploying the code.
4. **Environment Variables:** Configure environment variables on the hosting platform to store sensitive information like database connection details, API keys, and other configuration settings.
5. **Domain Name Configuration:** Configure a domain name for the website and point it to the deployed applications.

**Submission Guidelines:**

1. **Source Code:** Submit the complete source code for both the front-end and back-end applications.
2. **README File:** Include a README file with instructions on how to set up and run the project. This should include details about the required dependencies, database configuration, and API endpoints.
3. **Database Schema:** Provide a database schema or model definition for the database table used to store the heading text.
4. **API Documentation:** Include documentation for the API endpoints, including the request methods, parameters, and response formats.
5. **Deployment Instructions:** Provide instructions on how to deploy the project to a hosting platform.
6. **Working Link:** Include a link to the deployed website.
7. **Clear Code:** Write clear and well-commented code.
8. **Adherence to Instructions:** Ensure that the submission adheres to all instructions provided in the assignment description.