Real-world web application project built on top of NextJS framework and PayloadCMS as a headless CMS
The purpose of this site is to update a catalog of houses with details, and to be able to put a little dynamic tweak to the storefront. This web application mostly works on NextJS ecosystem and the backend is fully secure by PayloadCMS. NextJS is a React framework that is loved by the community, and flawlessly works out of the box with ease. Payload is a headless CMS and application framework. It's meant to provide a massive boost to your development process, but importantly, stay out of the way as the apps get more complex. By that, I have used the few of dependencies which almost the most popular by itself. Here are some technology overview;
- React - For the UI
- NextJS - Framework for the Client/Server/Routing
- Payload - Headless CMS for minimal size web application backstore
- TypeScript: Typed JavaScript (necessary for any project you plan to maintain)
- Express: Node server framework
- MongoDB: The most popular NoSQL database
- Mongo Atlas: You will need this in case you do not want to hosting your site without a server
- SWR: Data fetching for the persistent layouts
- Tailwind CSS: Utility classes for consistent/maintainable styling
- HeadlessUI: A set of accessible UI components every app needs (accordion/tabs/dialog/etc...)
- Postcss: CSS processor (pretty much just use it for autoprefixer and tailwind)
- Sitemap: For SEO stuffs
And the list of services this project uses:
- S3 Amazon/Digital Ocean Spaces - For the backstore Cloud Storage (Optional)
- Heroku - For hosting platform
- Cloudfare - For service workers and basic Security Pattern
- PayloadCMS - For CMS platform
Moreover, as I mentioned, this is a real-world project built by integrating NextJS and a custom server (ExpressJS). Because we want Payload to be completely integrated without splitting the whole stuff to another server and handled by Docker/Etc (Too complicated for a frontend developer and unnecessary at the moment), we choose an optimal solution to this project to run our own server to integrate into an existing application. Although this is the easier way, but also takes a little frustation to the frontend developer who has no experience in working with Babel and basic NodeJS.
- you will need Mongo database to store your data (can be Mongo Atlas) [specific Mongo shell version 5.0.2]
- Node JS version 10+
- Add your own .env config by following .env.example
- To access storefront you must use browser at address
http://localhost:3000 - To access backstore require filling the 'admin' keyword to the url substring
http://localhost:3000/admin
Beware of the bug!! because this project use NextJS canary version and React Alpha
You need few dependencies to transform webpack of Payload backend integrating with NextJS x ExpressJS custom server, here the list;
- ts-node
- @babel/register
- tsconfig-paths
- a setup scripts in package.json