Technical Documentation
Introduction
This technical documentation provides an overview of the FlexiArt web application, an enterprise-level software company website. The application is built using Angular 15 for the frontend and Node.js with Express.js for the backend. It includes various features such as user authentication, live chat support, AI chatbot integration, two-step verification, manual backups, and MongoDB database integration. The frontend is hosted on Netlify, while the backend is hosted on Render, with a MongoDB Atlas cluster for the database.
Frontend
Framework and Dependencies
- Angular 15 is used for building the frontend of the application.
- The application relies on several Angular packages for features such as animations, forms, routing, material design, and more.
- Third-party libraries such as Font Awesome, ngx-cookie-service, ng-image-slider, and ng-particles are integrated to enhance the user experience.
Routing
The application employs Angular's routing mechanism to create different pages for various sections. -A routing module defines the paths and corresponding components for each page. -The routing structure includes pages for home, about, services, works, technologies, contact, FAQ, blog, user dashboard, login, administration, chatbot, and more.
User Interaction
- The frontend offers a variety of user interaction components, including image sliders, star ratings, chatbots, and more.
- It utilizes Angular's reactive forms for handling user inputs and form submissions.
Hosting
- The frontend is hosted on Netlify and connected to a GoDaddy domain.
Backend
Framework and dependencies
- The backend is developed using Node.js with Express.js, providing a RESTful API for the frontend to communicate with.
- Key dependencies include Express, Mongoose for MongoDB interaction, body-parser for parsing request bodies, cors for enabling cross-origin requests, and jsonwebtoken for user authentication.
API Endpoints
- The backend defines various API endpoints to handle user registration, contact requests, dialog flow interactions, feedback submission, gallery management, offers, subscriptions, email sending, and more.
- Each API endpoint corresponds to a specific route and functionality.
Security
- The application implements user authentication using JSON Web Tokens (JWT) for securing API endpoints.
- Two-step verification is integrated using the speakeasy library, allowing users to enable two-factor authentication through an authenticator app.
- The backend utilizes bcrypt for hashing sensitive data such as passwords.
Backup
- Manual backups of the application's data are supported using the mongodb-backup library.
- A backup route is defined to trigger data backups when needed.
Sitemap
- A sitemap generation feature is included to enhance search engine optimization (SEO).
- The application generates an XML sitemap using the sitemap package to list URLs and their changefrequency and priority.
Hosting
- The backend is hosted on Render, providing a platform for deploying and managing Node.js applications.
Database
- The application's data is stored in a MongoDB database.
- A MongoDB Atlas cluster is used to manage the database, offering scalability and data redundancy.
- Mongoose is employed as an Object Data Modeling (ODM) library to interact with the MongoDB database.
Deployment
- The frontend is deployed on Netlify, connecting to a GoDaddy domain for accessibility.
- The backend is deployed on Render, providing a scalable environment for the Node.js application.
Additional Features
- The application includes live chat support using Tawk when agents are online and an AI chatbot for handling inquiries when agents are unavailable.
- Email addresses, login details, and live chat data are stored using cookies.
- The backend manages email sending, including features such as sending email templates and newsletters.
Conclusion
This technical documentation provides an overview of the FlexiArt web application, detailing its architecture, frontend and backend technologies, features, deployment, and more. It serves as a guide for understanding the application's structure and functionality, aiding in maintenance, updates, and further development. If you have any further questions or need more specific information, please don't hesitate to ask.
Contact : Kavindu Kokila
Database Schema Documentation
This documentation outlines the database schema used in the FlexiArt web application. The application relies on MongoDB for data storage and retrieval. Here are the database schema models and their respective fields:
Contact Schema
Model Name: Contact
Description: Represents user contact form submissions.
| Field Name | Data Type | Required | Description |
|---|---|---|---|
| fullName | String | Yes | Full name of the user |
| String | Yes | User's email address | |
| msg | String | Yes | Message from the user |
Dialogflow Schema
Model Name: Not stored in the database
Description: Handles interactions with the Dialogflow bot.
| Field Name | Data Type | Required | Description |
|---|---|---|---|
| sessionId | String | No | Unique session identifier |
| runIntent | Function | Yes | Sends queries to Dialogflow |
Feedback Schema
Model Name: Feedbacks
Description: Represents user contact form submissions.
| Field Name | Data Type | Required | Description |
|---|---|---|---|
| fullName | String | Yes | Full name of the user |
| msg | String | Yes | Feedback message |
| date | Date | Yes | Date of feedback submission |
Gallery Schema
Model Name: Gallery
Description: Represents images in the gallery.
| Field Name | Data Type | Required | Description |
|---|---|---|---|
| src | String | Yes | Image source path |
| thumb | String | Yes | Thumbnail image source path |
| caption | String | Yes | Image caption |
Offers Schema
Model Name: Offers
Description: Represents available offers.
| Field Name | Data Type | Required | Description |
|---|---|---|---|
| src | String | Yes | Image source path |
| date | String | Yes | Date of the offer |
| id | String | Yes | Offer identifier |
Project Count Schema
Model Name: Project-Count
Description: Represents project, client, and solution counts.
| Field Name | Data Type | Required | Description |
|---|---|---|---|
| clients | String | Yes | Number of clients |
| projects | String | Yes | Number of projects |
| solutions | String | Yes | Number of solutions |
Register Schema
Model Name: Users
Description: Represents registered users.
| Field Name | Data Type | Required | Description |
|---|---|---|---|
| String | Yes | User's email address | |
| password | String | Yes | User's password |
| fullname | String | Yes | Full name of the user |
| phone | String | Yes | User's phone number |
| address | String | Yes | User's address |
| verified | Boolean | No | Verification status |
These schemas represent the data models used in the FlexiArt web application. Each schema defines the structure of its respective data type, including field names, data types, and whether the fields are required or not. This organized structure enables efficient data management and retrieval throughout the application's lifecycle.
For further details or queries related to the database schemas, feel free to contact us.
API Documentation
Introduction
This API documentation provides detailed information about the APIs used in the FlexiArt web application. These APIs facilitate communication between the frontend and backend, enabling various functionalities such as user registration, contact requests, authentication, data retrieval, email sending, and more.
Base URL
The base URL for accessing the API endpoints is: <url>/api/v1/
Authentication
The application uses JSON Web Tokens (JWT) for user authentication. To access protected endpoints, include the JWT token in the Authorization header using the Bearer scheme.
API Endpoints
User Registration
Endpoint: /api/v1/user/register
Method: POST
Description: Registers a new user account.
Request Body:
{
"username": "exampleUser",
"email": "user@example.com",
"password": "userPassword"
}
Response: Returns a success message if registration is successful.
User Login
Endpoint: /api/v1/user/login
Method: POST
Description: Logs in a registered user.
Request Body:
{
"email": "user@example.com",
"password": "userPassword"
}
Response: Returns a JWT token upon successful login.
Contact Form Submission
Endpoint: /api/v1/flexiart/contact
Method: POST
Description: Handles user contact form submissions.
Request Body:
{
"name": "John Doe",
"email": "john@example.com",
"message": "Hello, FlexiArt team!"
}
Response: Returns a success message if the message is sent successfully.
Dialog Flow Interaction
Endpoint: /api/v1/dialogFlow
Method: POST
Description: Sends user messages to a Dialog Flow bot for processing.
Request Body:
{
"message": "How can you help me?"
}
Response: Returns a response from the Dialog Flow bot.
Feedback Submission
Endpoint: /api/v1/feedback
Method: POST
Description: Allows users to submit feedback.
Request Body:
{
"email": "user@example.com",
"feedback": "Great website!"
}
Response: Returns a success message if feedback is submitted successfully.
Gallery Management
Endpoint: /api/v1/gallery
Method: GET
Description: Retrieves a list of gallery items
Response: Returns a list of gallery items with details.
Offers Retrieval
Endpoint: /api/v1/offers
Method: GET
Description: Retrieves available offers.
Response: Returns a list of offers with details.
Subscription List Retrieval
Endpoint: /api/v1/subscribe
Method: GET
Description: Retrieves the list of subscribers.
Response: Returns a list of subscriber emails.
Email Sending
Endpoint: /api/v1/sendMail
Method: POST
Description: Sends emails for various purposes.
Request Body:
{
"to": "recipient@example.com",
"subject": "Welcome to FlexiArt",
"html": "<p>Welcome to FlexiArt. We're excited to have you on board!</p>"
}
Response: Returns a success message if the email is sent successfully.
Manual Backup
Endpoint: /api/v1/backup
Method: POST
Description: Triggers a manual backup of the application data.
Conclusion
This API documentation provides a comprehensive overview of the APIs used in the FlexiArt web application. Each API endpoint is described with its purpose, request structure, response format, and authentication requirements. Properly utilizing these APIs will enable the frontend and backend components of the application to work seamlessly together, providing users with a robust and feature-rich experience. If you have any further questions or need assistance, please feel free to reach out.
