Project Documentation - Flipr Consultancy (Fullstack)
Project Overview
This is a clean and fully responsive landing page built for Flipr Consultancy using HTML, CSS, and
JavaScript. The page is designed to showcase a professional consulting business with sections like Home,
About, Services, and Contact. It aims to give a real-world feel with smooth UI, responsive design, and
attention to layout structure.
Features
- Mobile-friendly and responsive design
- Hero section with company name and a CTA button
- About Us section highlighting Flipr's core values
- Services section with visual icons and short descriptions
- Contact form section (frontend only)
- Smooth scrolling and hover effects
- Custom layout without using Bootstrap or any external CSS framework
Technologies Used
- HTML5 for structure
- CSS3 for styling and responsiveness
- JavaScript (Vanilla) for small interactivity (like navigation toggle)
Folder Structure
landing_page/
[Link] Main HTML file
css/
[Link] Custom styles
js/
[Link] Navigation & scroll logic
assets/
images, icons Images used in the design
Project Documentation - Flipr Consultancy (Fullstack)
Deployment
The project is deployed on Netlify, a static site hosting platform that supports auto-deploy via GitHub.
Deployment URL: [Link]
Build settings:
- Build Command: Not needed (static site)
- Publish directory: /
How to Run Locally
1. Clone the repository:
git clone [Link]
2. Open the folder in your code editor or file explorer.
3. Open [Link] in any browser to view the page.
You can also use Live Server extension in VS Code for a smoother experience.
Author Info
Rupesh Mandliya
GitHub: [Link]
Email: rupeshmandliya524@[Link]
License
This project is open-sourced under the MIT License.
Backend Overview
The backend is built using [Link] and [Link] and is responsible for handling project and client data. It
connects to a MongoDB database using Mongoose and provides RESTful APIs to interact with frontend
Project Documentation - Flipr Consultancy (Fullstack)
components like project listings, contact form submissions, and more.
Backend Features
- [Link] with [Link] framework
- MongoDB database integration using Mongoose
- REST API endpoints for projects and clients
- CORS support for frontend-backend communication
- Environment-based configuration using dotenv
- Organized controller and routing structure
API Endpoints (Sample)
- GET /api/projects Fetch all projects
- POST /api/clients Add a new client
- GET /api/clients Retrieve all clients
- POST /api/contact Submit contact form details
- GET /api/ Root API health check
Backend Setup & Deployment
1. Navigate to the 'server/' folder in the project.
2. Install dependencies using npm install
3. Use a .env file to configure variables like:
- PORT=5000
- MONGO_URI=mongodb+srv://...
4. Start the server using npm start or npm run dev
The backend is deployed on Render or a similar [Link]-supported platform with environment variables
configured securely.
