Tiger style. Tiger style. Yes, like the song this will help you build a web app the world can't $%#@ wit.
This web app will retrieve album covers from Wikipedia and display them for the legendary hip hop group Wu-Tang Clan.
https://wu-tang-react-node-template.herokuapp.com
Learning how to C.O.D.E. is easier when you build something fun that you care about even if it's all so simple.
Backend:
- NodeJs - javascript runtime built on Chrome's V8 engine that allows developers to run javascript on the server side, enabling the creation of scalable and high-performance web applications
- ExpressJs - lightweight, flexible web application framework for NodeJs that simplifies building web and API servers by providing a robust set of features for routing, middleware, and HTTP handling aka serve up the site like banana pudding in the A
- Puppeteer - NodeJs library that provides a high-level API to control headless Chrome or Chromium browsers, enabling automated tasks like web scraping, testing, and interaction with web pages aka look ma no api
Frontend:
- ViteJs - fast, modern build tool and development server for web projects that offers lightning-fast hot module replacement (HMR) and optimized production builds aka run like daytona 500
- ReactJs - javascript library for building user interfaces, focusing on creating reusable UI components and efficiently updating and rendering them based on data changes aka make sites like lego blocks
- Google Material Design - design system that provides a consistent framework of visual, motion, and interaction design principles, implemented through reusable UI components to create intuitive and adaptable user experiences across devices and platforms aka make it look as good as Google stuff
- Progressive Web App (PWA) - web application that uses modern web technologies to deliver an app-like experience, including offline access, fast loading, and push notifications, while being accessible through a browser. More info at https://developers.google.com/web/progressive-web-apps/
- Run within the secure context of HTTPS
- Add to Home Screen for easier revisits and prevent showing browser's URL bar
Hosting server:
- Heroku - platform-as-a-service (PaaS) that simplifies app deployment and management by abstracting infrastructure complexities, while running on top of AWS to leverage its cloud infrastructure for scalability, storage, and security
General:
- Human Intelligence (HI) - the ability of individuals, originating from Earth, to learn, reason, solve problems, and adapt to new situations. It encompasses the capacity to understand complex ideas and make decisions by integrating knowledge, experience, consciousness, emotion, creativity, subjectivity, intuition, and biological processes.
- add .env file at root of project with following:
- NODE_ENV=development
- PORT=3001
- install NodeJs version indicated in .nvmrc file
- open command line to root of this project and type:
- npm i
- cd src/frontend
- npm i
- cd ../../
- npm start
Please listen to Wu-Tang Clan as it will enhance your coding experience. :D
Art created by Mark Drew