Login info for testing:
Username:     Matt (admin), Zack, Ramona, henry92
Password:       112233 (for everybody)

A real-time installable Chat Application built using React and ChatEngine.io with focus on the Progressive Web App aspects. It features a Login page with Username and Password fields. After logging in, all your existing chats will be displayed on the left side, with an option to create multiple chat rooms. Center of screen features the active chat where you can see the name of the chat as well as all participants, all sent and received messages with icons telling you who read the message as well as an input field where you can input your message and add a photo, as well as a send button. On the right side you can see all the people in the active chat with an option to add more people if you are an admin, as well as all sent and received photos and options such as deleting the chat. You can also log out from here.

PWAs are installable applications that can be built rather quickly, in regards to native apps that are pretty difficult to develop and are built in a programming language specific to the platform. Plus, it offers all the features of native apps, like push notifications, offline support, and much more. Many sites found online are actually a Progressive Web App, such as Twitter, Starbucks, Pinterest and Uber. Chat Engine is a Rest API service hosting your chats as well as NPM components to help with your Chat UI.

• PWAs can be built with common web technologies
• They are often cheaper to build
• Turning the site into an app results in fewer code-bases to maintain
• PWAs are responsive and work with many different screen sizes
• PWAs are smooth, fast and lightweight
• They can work offline, unlike regular sites
• The process to get into different app stores can be avoided
• PWAs are discoverable via search engines (which have a lot larger audience than app stores. Plus, PWAs can still be distributed via app stores)
• PWAs can use push notifications to re-engage users
• Aggressive data caching and fast page navigation with service workers

• Code
• Demo

Info for checkout process testing:
Credit card:               4242 4242 4242 4242
Expiration date:       04/24
CVC code:                  242
ZIP code:                   42424

A fully functional E-commerce application built with React and Commerce.js, using Stripe for card transactions and styled using Material-UI. The site features Product components with pictures, description, price and Add to Cart button. It also features a Cart icon that dynamically updates based on how many items are added to the cart. Once in the Shopping Cart, you can see added products as well as options to adjust quantity, remove that product, empty the entire cart or proceed to checkout, as well as a subtotal of all added items. When checking out, you will see the order summary after which you will be prompted to enter your shipping details as well as choose shipping options and enter your credit card info. Once the transaction has been completed successfully, you will get a thank you message as well as a confirmation email.

Commerce.js is a headless commerce solution responsible for handling commerce logic, such as product, cart, promotions and the checkout process, all via an API, making it faster for developers to create unique commerce experiences quickly. Headless commerce enables deeper control over customer experience, site speed, and third party integrations. It is technology agnostic and can be implemented anywhere.

• Use the front-end technology you want to create your desired E-commerce experience
• Serve all your E-commerce components with ease, using a CDN
• Manage order details, products, fulfillment, receipts, refunds, and customers through an admin dashboard
• Third-party gateways, connect a Stripe, Square, PayMill, PayPal or Razorpay gateway to your account
• Control the fulfillment tracking process by integrating with any carrier
• A familiar interface that anyone can use, optimized for creating products and processing orders

• Code
• Demo

Admin login info for testing:
Email:             blogtest@email.com
Password:     blogtest

A Blog site created using Gatsby with Netlify CMS. Blog posts can be easily written in Netlify CMS. New blog posts dynamically generate a new page using markdown data from GraphQL or Netlify CMS data and a blog post page template. Header and Footer were created as React shared components and they use site Metadata from GraphQL to display basic information on the page layout component. There is a custom 404 page and the site’s head is managed by React Helmet. The site is styled using SCSS modules.

Gatsby is great for building web experiences that simultaneously leverage the benefits of static sites and web applications. Some of its key benefits are modular architecture, plugins and speed. Gatsby behaves like a regular React application with reusable and shareable components, and is built as a single page application. Gatsby sites are more secure, even if using third-party CMS to fetch data, in most cases it is read-only access with no direct connection to the database, dependencies, user data or other sensitive information and it allows serving the site from any CDN used by the company which effectively eliminates the risk of DDOS attacks. In comparison to dynamic CMSes that need databases, mail servers and cache solutions, Gatsby is much easier and cheaper to maintain. Netlify CMS is an open source content management system for Git workflows that enables a company to provide editors with a friendly UI and intuitive workflows at virtually no cost to client, unlike traditional CMSes.

• Company can grow its margin by cutting hosting and maintenance costs
• More leads can be generated due to site loading time and bounce rate which have an impact on conversion rates
• SEO optimization - Increased traffic without changes in content

• Code
• Demo

A fast, responsive and user-friendly Covid-19 Tracker built with React and Chart.js and styled with Material-UI, using Covid-19 Mathroid API. The site shows number of Infected, Recovered and Deaths on a global scale or by country via a count-up timer. The global scale is displayed on a line chart, while individual countries are displayed on bar charts.

Some of the benefits of using React are that it guarantees better user experience and higher performance due to React features such as virtual DOM to which all the changes are applied first and then, the minimal scope of necessary operations is calculated and updated to the real DOM. It also uses only downward data flow to make sure that even small changes that take place in the child structures won't affect their parents. React is very SEO friendly in terms of its ability to deal with a common search engine failure to read JavaScript-heavy apps. It can run on the server, rendering and returning the virtual DOM to the browser as a regular webpage. The benefit of using Material Design is that Google has invested a lot of time and effort into UI and UX research, so customers can learn the apps faster, due to consistent navigation and behavior and previous familiarity.

• Better user experience
• Higher performance and faster rendering – Using a virtual DOM
• Faster and easier to develop - Instead of creating each element from scratch, we simply mix and match the existing components, with an option to additionally customizer
• Reusable components
• Consistent design and behavior - components look great without requiring any extra effort from the developer, they’re carefully designed by professionals
• SEO friendly

• Code
• Demo

Full-stack Expense Tracker built with React on the Client side and Express and Node on the Server side, using MongoDB as a database. The app keeps track of income and expenses. It shows balance, expense and income totals. Transactions can be added and deleted. Adding and deleting transactions is reflected in totals.

Using the MERN stack enables developers to build highly efficient web applications by writing every line of code in JavaScript, eliminating the need for context switching. This stack, in addition to using high-performance and customized technologies, allows for web applications and software to be developed very quickly. MERN is considered a cost-effective stack as with open-source support, accessible set-up and reduced learning time, it may have the lowest development cost.

• React DOM manipulation
• Using Hooks
• Implementing Context API
• Building a REST API
• CRUD functionality

• Code
• Demo