Single Page Application (SPA) with Webpack and Express - Server-Side Cryptocurrency Menu Rendering

📗 Table of Contents

• 📖 About the Project
  • 🛠 Built With
    • Tech Stack
    • Key Features
  • 🚀 Live Demo
• 💻 Getting Started
  • Setup
  • Prerequisites
  • Install
  • Usage
  • Run tests
  • Deployment
• 👥 Authors
• 🔭 Future Features
• 🤝 Contributing
• ⭐️ Show your support
• 🙏 Acknowledgements
• ❓ FAQ (OPTIONAL)
• 📝 License

📖 [SPA WEBPACK & EXPRESS ]

[SPA WEBPACK & EXPRESS] This repository provides an example implementation of a Single Page Application (SPA) built using Webpack and Express, with a focus on server-side menu rendering. The primary goal of this project is to demonstrate how to create a dynamic routing system in Express that allows rendering menu paths from the server without requiring a full page reload. Modern web applications often utilize Single Page Application (SPA) architecture to provide a smooth and interactive user experience. However, SPAs can face challenges related to SEO and initial page load times. This project addresses these challenges by demonstrating how to set up a server-side rendering approach for menu paths, ensuring that menu links are SEO-friendly and provide fast initial page loads.

With the help of Coinlayer Api, The menu renders the most popular cryptocurrencies with the highest market capitalization. The menu filters the max supply, low supply and profile cards of each cryptocurrency. The above features show how to render menu paths from the server without requiring a full page reload.

Tech Stack

HTML

CSS

Javascript

Webpack

Express

ES6 Modules

REST API

Async/await

Server-Side Rendering

Coinlayer API

Promises

Key Features

• [HTML & CSS Best practices]
• [Responsive Design]
• [SPA Architecture]
• [Server-Side Menu Rendering]
• [ES6 Modules]
• [Webpack Bundling ]
• [Express Server to handle routing]
• [Filtering high/low supply and profile cards]
• [Server-Side Rendering]

Features

SPA Architecture:

The project showcases the implementation of a Single Page Application using Webpack and Express.

Server-Side Menu Rendering:

Express is configured to dynamically render menu paths on the server side, eliminating the need for full page reloads when navigating between menu items. The menu filters the max supply, low supply and profile cards of each cryptocurrency.

Webpack Integration:

The project employs Webpack for bundling and optimizing client-side assets, resulting in a performant and efficient front-end.

(back to top)

🚀 Live Demo

• Live Demo Link

(back to top)

💻 Getting Started

To get a local copy up and running, follow these steps.

Prerequisites

To run this project you need the following tools installed:

• VS Code
• [Git and GitHub ]
• Nodejs
• [Express ]
• Coinlayer API
• [Webpack Installation ]
• [CI CD Netlify Bot Instalation]

Setup

Clone this repository to your desired folder:

 cd SPA-Webpack-Express
 git clone git@github.com:alyconr/SPA-Webpack-Express

Install

Install this project with:

 npm install

Usage

To run locally run the following command:

Development mode

    npm run build-dev
    npm run devserver-reload    

Production mode

    npm run build-prod
    npm run server-prod

Run tests

To run tests, run the following command:

To test the Stylelint linter:

    npx stylelint "**/*.{css,scss}"

To test the Webhint:

    npx hint .

To test the ESLint linter:

    npx eslint .

Deployment

soon ...

(back to top)

👥 Authors

JEYSSON CONTRERAS

👤 Author1

• GitHub: @alyconr
• LinkedIn: LinkedIn

(back to top)

🔭 Future Features

• [GitHub Actions Deployment]
• [Docker and Docker Compose Deployment]
• [Selfsigned SSL Certificate]

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

Write a message to encourage readers to support your project

If you like this project please give one start.

(back to top)

🙏 Acknowledgments

I would like to thank God for giving me the strength to carry out this project.

(back to top)

(back to top)

📝 License

This project is MIT licensed.

(back to top)