Explorience is a mobile-first ecommerce web project built with Next.js and React that turns event and experience data from the Musement API into a responsive online storefront. Created by a five-person team as an Edgemony coding bootcamp capstone and presented on April 30, 2021, it demonstrates a complete front-end architecture: React components, SASS styling, Axios HTTP requests, and Next.js file-based routing.
What is Explorience?
Explorience is a front-end ecommerce application that consumes the Musement API via Axios and renders event and experience listings in a mobile-first, SEO-optimized layout. It runs on Next.js, bootstrapped with create-next-app, so it includes file-based routing, API routes under /api, and automatic code splitting. The project was built by Martina Palma, Vithoosha Sripaskaran, Casimiro P. Ciancimino, Simonetta Viola, and Sebiano di Luca, with special participation from Stefano Russo, and is deployed live at explorience.vercel.app.
Key Features
- Mobile-first design — The layout is designed from zero with mobile screens as the primary target, then scaled up to larger viewports for tablets and desktops.
- SEO optimized — The site includes SEO optimization, aiming to make event and experience pages more discoverable by search engines.
- Performance oriented — The repository includes a performance score screenshot and lists performance best practices as a goal, so the build prioritizes fast loading.
- Musement API integration — Axios fetches event and experience data from the Musement API, turning raw JSON into browsable product-style pages.
- Next.js framework — Built on Next.js with create-next-app, providing file-based routing, API routes in
pages/api, and automatic page pre-rendering. - SASS styling — All styles are written in SASS, a CSS preprocessor that adds variables, nesting, and mixins to the stylesheet.
- User-friendly UI/UX — The interface is described as UI/UX friendly, with a focus on clear navigation and an approachable visual design.
Who is it for?
- Coding bootcamp students — A reference implementation for building a multi-page ecommerce site with Next.js, showing how to structure components, fetch data with Axios, and style with SASS.
- Event and experience businesses — A starting point for a storefront that lists tours, activities, and events by plugging in the Musement API or a similar data source.
- Front-end developers — A small, readable codebase that demonstrates how API routes, React components, and client-side data fetching fit together in a Next.js project.
What can you do with Explorience?
- Event organizers: display a catalog of bookable experiences fetched from the Musement API, with mobile-friendly browsing and SEO-ready pages.
- Students and learners: run the dev server locally with
npm run dev, editpages/index.js, and see hot-reload updates in the browser at http://localhost:3000. - Designers: inspect a from-zero mobile-first layout that relies on custom SASS rather than a third-party UI kit, with attention to performance and scalability.
How does Explorience work?
Explorience follows the standard create-next-app workflow. First, run npm run dev or yarn dev to start the development server and open http://localhost:3000. The main page is pages/index.js, and editing it auto-updates the browser. API routes live in pages/api and are mapped to /api/*, so the front end can call endpoints such as /api/hello during development.
FAQ
Is Explorience free to use?
Yes. The repository is a student project with no license restrictions mentioned, and the live demo is publicly accessible at explorience.vercel.app.
Does Explorience use a real API?
Yes. Data is fetched from the Musement API using Axios, giving the site real event and experience listings instead of mock data.
What do I need to run Explorience?
You need Node.js and a package manager like npm or yarn. After installing dependencies, run npm run dev and open the localhost URL to view the project.
What pages does Explorience include?
The README explicitly mentions pages/index.js and API routes, so the core is a home page plus API endpoints. It does not list separate pricing, blog, or dashboard pages.
Who built Explorience?
It was made by five Edgemony bootcamp students — Martina Palma, Vithoosha Sripaskaran, Casimiro P. Ciancimino, Simonetta Viola, and Sebiano di Luca — with special participation from Stefano Russo.
