A quiet, image-first space for sharing the moments worth remembering.
Glimpse is a visual publishing product built around a simple idea: a photo and a few words can preserve a moment better than a noisy stream of updates.
People can browse a responsive feed of shared moments, publish an image with an optional caption, and switch between light and dark themes for a more personal viewing experience. The interface stays intentionally focused so the image, the story, and the feeling behind it remain the centre of the product.
Glimpse is designed to make sharing feel effortless:
- Open the feed and discover moments from the community.
- Select an image from the create view.
- Add an optional caption of up to 280 characters.
- Publish the moment and return to the feed.
The feed handles loading, empty, and error states clearly, while the visual system adapts to the user's preferred light or dark theme.
- Image-first feed with responsive grid layout.
- Publish PNG, JPEG, and WEBP images.
- Add an optional caption to each post.
- Display publication dates for shared moments.
- Randomize feed order on the client for a fresh browsing experience.
- Preview an image before publishing.
- Persist light and dark theme preference in the browser.
- Responsive experience across desktop and mobile screens.
- Dedicated create flow at
/create. - Production mode capable of serving the built frontend from the backend.
Glimpse is maintained as a small monorepo with a separate frontend and backend that can be developed and deployed independently.
Glimpse/
├── Frontend/ React client and Vite build
│ ├── src/
│ │ ├── App.jsx Client-side routes
│ │ ├── pages/
│ │ │ ├── Posts.jsx Visual feed
│ │ │ └── Create.jsx Image publishing flow
│ │ ├── index.css Product styling and themes
│ │ └── main.jsx Frontend entry point
│ └── package.json
├── Backend/ Express API and persistence layer
│ ├── src/
│ │ ├── app.js API routes and production serving
│ │ ├── db/ MongoDB connection
│ │ ├── model/ Mongoose post model
│ │ └── services/ ImageKit upload service
│ ├── server.js API process entry point
│ └── package.json
├── Procfile Heroku process declaration
└── package.json Root deployment scripts
| Product area | Technology |
|---|---|
| Client | React 19, React Router, Vite 8 |
| UI | Custom CSS, Lucide React |
| API | Node.js, Express 5 |
| Database | MongoDB with Mongoose |
| Media | ImageKit |
| HTTP client | Axios |
| Deployment | Vercel-compatible frontend and Heroku-compatible backend |
- Node.js 18 or newer
- pnpm 11 or a compatible pnpm version
- A MongoDB database, such as MongoDB Atlas
- An ImageKit account with a private key
From the repository root:
cd Backend
pnpm installInstall frontend dependencies in a second terminal:
cd Frontend
pnpm installCreate Backend/.env:
NODE_ENV=development
MONGODB_URI=your_mongodb_connection_string
IMAGEKIT_PRIVATE_KEY=your_imagekit_private_key
CLIENT_ORIGIN=http://localhost:5173Keep IMAGEKIT_PRIVATE_KEY and the MongoDB connection string server-side. Do not commit real credentials or replace the example values in source control.
Run the API:
cd Backend
pnpm devThe API runs on http://localhost:3000 by default.
Run the frontend in another terminal:
cd Frontend
pnpm devVite will print the frontend URL, usually http://localhost:5173.
The frontend reads VITE_API_URL to find the backend. If it is not provided during local development, it uses http://localhost:3000.
For a deployed frontend, configure:
VITE_API_URL=https://your-backend-url.example.comThe backend only accepts configured origins through CLIENT_ORIGIN. Multiple production origins can be supplied as a comma-separated list without trailing slashes.
GET /postsExample response:
{
"message": "Posts fetched successfully",
"posts": []
}POST /create-post
Content-Type: multipart/form-dataForm fields:
| Field | Type | Required | Description |
|---|---|---|---|
image |
File | Yes | PNG, JPEG, or WEBP image uploaded to ImageKit |
caption |
String | No | Optional caption, limited to 280 characters in the client |
The API uploads the image to ImageKit, stores the resulting URL and caption in MongoDB, and returns the created post.
Run commands from the relevant application directory.
pnpm dev # Start the Vite development server
pnpm lint # Check the frontend with ESLint
pnpm build # Create the production bundle
pnpm preview # Preview the production bundle locallypnpm dev # Start the API with Node watch mode
pnpm start # Start the API normallyThe frontend can be deployed to Vercel or another static hosting provider.
- Root directory:
Frontend - Build command:
pnpm build - Output directory:
dist - Required variable:
VITE_API_URL
Current frontend deployment: https://glimpse.abdulrdeveloper.me
The repository root is configured for Heroku-style deployment. The root package.json installs the backend dependencies during postinstall, and the Procfile starts Backend/server.js.
Configure these server-side variables in the hosting provider:
NODE_ENV=production
MONGODB_URI=your_mongodb_connection_string
IMAGEKIT_PRIVATE_KEY=your_imagekit_private_key
CLIENT_ORIGIN=https://your-frontend-domain.example.comCurrent backend deployment: https://glimpse-backend-32b8b73fd2f6.herokuapp.com
After deployment, verify that GET /posts responds successfully and that the create flow can upload an image and publish a post from the live frontend.
Glimpse stores published image URLs, captions, and timestamps to provide the feed. Only share images and captions that you have permission to publish. Do not upload sensitive personal information, private documents, or content belonging to someone else without consent.
The media provider, database provider, hosting provider, and any user-provided external services may process data according to their own policies.
Glimpse is open to thoughtful improvements to its product experience, accessibility, performance, documentation, and reliability. Please review the Contributing guide and follow the Code of Conduct before participating.
Built by Abdul Rahman (@abdulrdeveloper).
- Website: abdulrdeveloper.me
Glimpse is available under the MIT License.