Introduction

Virtual Lolly is a fun and innovative JAMstack demo site that allows users to create and send virtual lollipops to brighten someone's day. This project showcases a modern web development approach using pre-rendered content with serverless API fallbacks. It demonstrates how to combine static site generation with dynamic content creation for optimal performance and user experience.

Main Features

1. Create and share personalized virtual lollipops
2. JAMstack architecture for improved performance and scalability
3. Pre-rendered content using Eleventy static site generator
4. Serverless API fallbacks for handling new content
5. User-generated data stored in Fauna DB
6. Deployed and hosted on Netlify
7. Custom 404 routing for serving newly created items
8. Responsive design for various devices

Installation Steps

1. Clone the repository:

   git clone https://github.com/philhawksworth/virtual-lolly.git
   

2. Navigate to the project directory:

   cd virtual-lolly
   

3. Install dependencies:

   npm install
   

4. Set up environment variables: Create a .env file in the root directory and add necessary API keys and configuration settings.

5. Run the development server:

   npm run start
   

6. Build the site for production:

   npm run build
   

Usage Instructions

1. Creating a Virtual Lolly:

   • Visit the homepage and click on "Make a new lolly"
   • Customize the lolly colors and add a message
   • Submit the form to generate a unique URL for your lolly

2. Sharing a Lolly:

   • Copy the generated URL and share it with the recipient

3. Viewing a Lolly:

   • Open the shared URL to see the personalized virtual lolly

4. Deploying to Netlify:

   • Connect your GitHub repository to Netlify
   • Configure build settings as specified in netlify.toml
   • Deploy the site

5. Managing Content:

   • New lollies are initially served via the serverless API
   • The site rebuilds periodically to include new content in the static render

Important Notes

1. This project uses Eleventy for static site generation. Familiarize yourself with Eleventy's documentation for customization.

2. Fauna DB is used for storing user-generated data. Ensure proper setup and security measures for the database.

3. The serverless functions are crucial for handling new content. Test thoroughly before deployment.

4. Custom 404 routing on Netlify is key to serving newly created items. Verify this functionality in your deployment settings.

5. Keep API keys and sensitive information secure. Use environment variables and do not commit them to the repository.

6. Regular builds are necessary to incorporate new content into the static site. Configure build hooks or scheduled builds on Netlify.

7. Monitor serverless function usage to manage costs and performance.

8. Optimize images and assets for faster loading times.

9. Consider implementing caching strategies for improved performance.

10. Regularly update dependencies to ensure security and access to new features.