1) Project Overview
a) Product purpose: This SEO Audit Report Tool, built with TypeScript, React, and Next.js, transforms raw data entered in Airtable into comprehensive reports.
Using this tool, users can not only view and share but also download their reports in PDF format which is generated using our Node.js backend.
b) Reusable Best Practices for Next.js Codebase : CodeWalnut leads an open-source project offering a high-quality Next.js boilerplate.
It's accessible for developers to use and customize as per your needs.
2) Technical Overview
a) Architecture Description: This architecture combines the power of Next.js on the frontend, Node.js on the backend, and Airtable as the data source to create an efficient and user-friendly SEO Audit Report Tool.
b) Architecture Workflow:
Explanation: When a user engages with our Next.js-based frontend, they are directed to a URL structured as https://baseurl/seo-report/tableId.
The tableId in this URL prompts Next.js to retrieve data from the Airtable using Airtable API.
This data is then displayed on our user interface.
If the user opts to click the "Download" button, Next.js communicates with our backend developed in Node.js, sending the tableId as part of the API request.
Using this identifier, the Node.js backend fetches the relevant table data from Airtable, converts this data into a PDF, and then sends the PDF buffer back to the frontend for PDF Download.
c) Technologies Used:
i) Programming Languages:
-> JavaScript (ES8+)
-> TypeScript (3+)
ii) Front-end:
-> NextJs: Used for building the user interface.
-> React Testing Library (13.4.0): Used for testing React components.
iii) Back-end:
-> NodeJs (18.x): Runtime environment for executing JavaScript server-side.
-> Jest (29.4.0): Used for writing unit tests.
iv) Database:
-> Airtable: We utilize Airtable as our data repository, allowing for easy data entry and organization.
Each client's data is stored in separate tables, ensuring data separation and scalability.
v) Database:
-> ESLint (8.32.0): Used for code linting.
-> Prettier (2.8.3): Used for code formatting.
d) Engineering Best Practices applied:
CodeWalnut leads an open-source project offering a high-quality Next.js boilerplate.
It's accessible for developers to use and customize as per their needs.
Best Practices followed:
i) EsLint : ESLint is used for code quality and style consistency.
ii) Prettier: Prettier is used to automatically format code, ensuring consistent and clean code styling across a project.
iii) Solid Principles ( In Next.js ): We use the SOLID principles in software design to create maintainable, flexible, and scalable code.
iv) TypeScript: TypeScript is used to add static typing to JavaScript, which helps catch errors early, improve code documentation
v) Unit Tests and Integration Tests : Automated tests help developers ensure the software works as intended by trying out different situations and checking if it behaves correctly.
vi) Reusable components: Such as Buttons, Cards and Spinner.
3) Development Environment Setup:
a) Required Software and Tools
i) Ensure Git is installed on your system. ( Download link: https://git-scm.com/downloads )
ii) Ensure Node is installed on your system. ( Download link: https://nodejs.org/en/download/)
iii) If you haven't already chosen a preferred code editor, consider downloading Visual Studio Code from https://code.visualstudio.com/download
b) Required credentials, access, and environment files
i) You need to create a clone from our repositories.
(1) Frontend : https://github.com/CW-Codewalnut/seo-audit-tool-next
(2) Backend : https://github.com/CW-Codewalnut/seo-audit-report-node
ii) You'll need .env files for all repositories.for both frontend and backend you got .env.example in there respective repo just change them to .env
iii) We use Airtable API to retrieve SEO-audit-report data
(1) Creating a SEO audit report in Airtable is easy. You can use our ready-made templates by simply clicking on the “Use this data” button at the top of the screen on Airtable.
(2) Here are the links that’ll take you to our ready-made template
(a) for single-client-report: (Click Here)
(b) for two-client-report : (Click Here)
(c) for three-client-report : (Click Here)
(3) Simplify your process and enhance readability with our user-friendly seo-audit-templates.
c) Project Clone and Initial Setup
i) Create a clone of both the repositories.
ii) Open a project in VS Code.
iii) Rename .env.example files to .env
iv) Then we need to install all required dependencies and run the command “npm i” in your VS Code terminal.
v) To start server use command .
For Frontend : ‘npm run dev’ in your terminal.
For Backend: ‘npm start’ in your terminal
Note: Check out our blog post about the best cloud deployment process: Vercel vs Heroku, and how to choose the right deployment option.
4) Support:
CodeWalnut is the developer and oversees of this project. If you require assistance, please don't hesitate to reach out to us at nattu@codewalnut.com.
5) Test Url :
https://seoreport.leadwalnut.com/seo-report/test
6) Improvements:
Login Authentication is missing from this project for now.
Author
