TrustWall

TrustWall is a fullstack MERN application where customers can submit testimonials, businesses can review them from an admin dashboard, and approved testimonials are displayed on a public wall. It also includes a simple embeddable widget that allows approved testimonials to be shown on any third-party website.

The project was built with the focus on clean architecture, readable code, and an end-to-end working flow.

---

🚀 Live Demo

Service	URL
Live Application	https://trust-wall-seven.vercel.app/
Frontend	https://trust-wall-seven.vercel.app/
Backend API	https://trustwall-slgo.onrender.com/
API Endpoint	https://trustwall-slgo.onrender.com/api/testimonials

Note: The backend is hosted on Render's free tier. If it has been inactive, the first request may take around 30–60 seconds while the service wakes up.

---

📄 Application Pages

Page	URL
Home (Submit Testimonial)	https://trust-wall-seven.vercel.app/
Admin Dashboard	https://trust-wall-seven.vercel.app/admin
Public Wall	https://trust-wall-seven.vercel.app/wall
Widget Preview	https://trust-wall-seven.vercel.app/widget-preview

---

Features

Core Features (P0)

• Submit a testimonial
• Store testimonials in MongoDB
• Admin dashboard to approve or reject testimonials
• Public wall showing only approved testimonials

Flow:

Submit Testimonial
        ↓
Stored as Pending
        ↓
Admin Dashboard
        ↓
Approve / Reject
        ↓
Public Wall (Approved Only)

---

Additional Features (P1)

• Embeddable JavaScript widget
• Widget customization
  • Accent color
  • Grid/List layout
  • Number of testimonials
• Pagination
• Duplicate submission validation
• Basic junk message filtering
• Loading, Empty and Error states

---

AI Feature (P2)

Integrated Groq API (llama-3.1-8b-instant) for automatic sentiment analysis.

Every submitted testimonial is automatically tagged as:

• Positive
• Neutral
• Negative

If the AI request fails or the API key is missing, the testimonial is still saved successfully.

---

Tech Stack

Frontend

• React (Vite)
• TypeScript
• React Router
• Axios
• Tailwind CSS
• Context API

Backend

• Node.js
• Express.js
• MongoDB
• Mongoose

AI

• Groq API

---

Folder Structure

backend/
│
├── config/
├── controllers/
├── middleware/
├── models/
├── routes/
├── services/
└── server.ts


frontend/
│
├── components/
├── context/
├── pages/
├── services/
└── public/widget/

---

Run Locally

Backend

cd backend
npm install
cp .env.example .env
npm run dev

Required environment variables

MONGO_URI=

GROQ_API_KEY= (optional)

Backend runs on

http://localhost:5000

---

Frontend

cd frontend
npm install
cp .env.example .env
npm run dev

Frontend runs on

http://localhost:5173

---

Widget Demo

The widget can be tested in two ways.

• Visit /widget-preview inside the application.
• Open frontend/public/widget/demo.html to see how it works on a third-party webpage.

---

API Endpoints

Method	Endpoint	Description
POST	/api/testimonials	Submit a testimonial
GET	/api/testimonials	Get all testimonials
GET	/api/testimonials/approved	Get approved testimonials
PATCH	/api/testimonials/:id/status	Approve or Reject testimonial
GET	/api/testimonials/widget	Data for embeddable widget

---

Frontend Routes

Route	Description
/	Submit Testimonial
/admin	Admin Dashboard
/wall	Public Testimonials
/widget-preview	Widget Preview

---

🌐 Deployment

The application is fully deployed and accessible online.

Service	Platform	URL
Frontend	Vercel	https://trust-wall-seven.vercel.app/
Backend API	Render	https://trustwall-slgo.onrender.com/
Database	MongoDB Atlas	Cloud Hosted

Note: The backend is hosted on Render's free tier, so the first request may take 30–60 seconds if the service has been idle.

---

🚀 Future Improvements

Given more development time, the following enhancements could be added:

• User authentication and role-based access control
• Search, filtering, and pagination
• Dashboard analytics and insights
• Cloudinary integration for image uploads
• More widget customization options (themes, layouts, sizes)
• Automated testing with Jest and Supertest
• CI/CD pipeline using GitHub Actions
• Docker support for easier deployment

---

📝 Project Notes

• Authentication and authorization were intentionally excluded to align with the assignment requirements.
• The project follows a simple MVC architecture with a focus on readability and maintainability.
• Database operations are performed directly using Mongoose without introducing unnecessary abstraction.
• AI-powered sentiment analysis is integrated using the Groq API.
• The application is fully responsive and deployed using Vercel (frontend) and Render (backend).

---

📚 Additional Documentation

For implementation details and development decisions, refer to:

• JOURNAL.md – Development journal, technical decisions, and progress log.
• AGENTS.md – Project architecture, coding guidelines, and implementation notes.