LaunchThrifty Challenges

Check out the resources. Scroll >

LaunchThrifty Challenges

Creative limitations to help you build better products and have fun doing it.

<section class="bg-purple-100 py-16">
    <div class="max-w-4xl mx-auto text-center">
      <p class="text-purple-600 mb-2">
        Announcing our next round of funding. <a href="#" class="underline">Read more &gt;</a>
      </p>
      <h2 class="text-4xl font-bold mb-4">Data to enrich your online business</h2>
      <p class="text-xl mb-8">
        Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.
      </p>
      <div class="flex justify-center space-x-4">
        <a href="#" class="bg-purple-600 text-white px-6 py-3 rounded-md hover:bg-purple-700">Get started</a>
        <a href="#" class="text-purple-600 px-6 py-3 rounded-md border border-purple-600 hover:bg-purple-600 hover:text-white">Learn more &gt;</a>
      </div>
    </div>
  </section>

Challenges

Astro LOC

Break up your Astro project however you want, but keep under 1000 lines of code.

Flutter Lite

Build a Flutter app using only 3 dependencies

In the Clouds

Build an app that performs all of its business logic in Firebase Cloud Functions

One HTML File

Go back to the early days of the web and forget everything you think you know about web dev.

Val Town Jamboree

Everything is a Val.

<section class="bg-white py-12">
    <div class="max-w-4xl mx-auto">
      <h2 class="text-3xl font-bold mb-10 text-center">Everything you need to deploy your app</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        <div class="bg-purple-100 p-6 rounded-lg">
          <div class="flex items-center mb-4">
            <div class="bg-purple-500 text-white p-2 rounded-full mr-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
              </svg>
            </div>
            <h3 class="text-xl font-bold">Push to deploy</h3>
          </div>
          <p class="text-gray-600">Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse semper morbi. Odio urna massa nunc massa.</p>
        </div>
        <div class="bg-purple-100 p-6 rounded-lg">
          <div class="flex items-center mb-4">
            <div class="bg-purple-500 text-white p-2 rounded-full mr-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
              </svg>
            </div>
            <h3 class="text-xl font-bold">SSL certificates</h3>
          </div>
          <p class="text-gray-600">Sit quis amet rutrum tellus ullamcorper ultricies libero dolor eget. Sem sodales gravida quam turpis enim lacus amet.</p>
        </div>
        <div class="bg-purple-100 p-6 rounded-lg">
          <div class="flex items-center mb-4">
            <div class="bg-purple-500 text-white p-2 rounded-full mr-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
              </svg>
            </div>
            <h3 class="text-xl font-bold">Simple queues</h3>
          </div>
          <p class="text-gray-600">Quisque est vel vulputate cursus. Risus proin diam nunc commodo. Lobortis auctor congue commodo diam neque.</p>
        </div>
        <div class="bg-purple-100 p-6 rounded-lg">
          <div class="flex items-center mb-4">
            <div class="bg-purple-500 text-white p-2 rounded-full mr-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
              </svg>
            </div>
            <h3 class="text-xl font-bold">Advanced security</h3>
          </div>
          <p class="text-gray-600">Arcu egestas dolor vel iaculis in ipsum mauris. Tincidunt mattis aliquet hac quis. Id hac maecenas ac donec pharetra eget.</p>
        </div>
      </div>
    </div>
  </section>

From the blog

Build something inside the box.

5/15/2024

Challenge: Astro Loc

Build a website using Astro with a maximum of 1000 lines of code.

astro, web-development, performance

5/17/2024

Challenge: Flutter Lite

Build a Flutter app using a maximum of 3 external dependencies.

flutter, mobile-app, dart, dependencies

5/19/2024

Challenge: In the Clouds

Build a complete backend using Firebase Cloud Functions.

firebase, cloud-functions, serverless, backend-development

5/14/2024

How do I count lines of code?

Quick steps to count the total lines of code in your project

loc

5/16/2024

Challenge: One HTML File

Build a complete website using only a single HTML file.

html, css, javascript, web-development

5/14/2024

Challenge: Val Town Jamboree

Vals are JavaScript, TypeScript, and JSX. Build a project using only Vals.

val-town, javascript, typescript

<section class="bg-white py-12">
    <div class="max-w-4xl mx-auto">
      <h2 class="text-3xl font-bold mb-10">From the blog</h2>
      <p class="text-xl mb-10">Learn how to grow your business with our expert advice.</p>
  
      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        <div class="bg-gray-100 p-6 rounded-lg">
          <div class="flex items-center mb-4">
            <img src="https://via.placeholder.com/50" alt="Author" class="w-10 h-10 rounded-full mr-4">
            <div>
              <p class="font-bold">Michael Foster</p>
              <p class="text-gray-600">Co-Founder / CTO</p>
            </div>
          </div>
          <p class="text-gray-600 mb-4">Mar 16, 2020 - Marketing</p>
          <h3 class="text-xl font-bold mb-2">Boost your conversion rate</h3>
          <p class="text-gray-600">Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel iusto corrupti dicta laboris incididunt.</p>
        </div>
        
        <div class="bg-gray-100 p-6 rounded-lg">
          <div class="flex items-center mb-4">
            <img src="https://via.placeholder.com/50" alt="Author" class="w-10 h-10 rounded-full mr-4">
            <div>
              <p class="font-bold">Lindsay Walton</p>
              <p class="text-gray-600">Front-end Developer</p>
            </div>
          </div>
          <p class="text-gray-600 mb-4">Mar 10, 2020 - Sales</p>
          <h3 class="text-xl font-bold mb-2">How to use search engine optimization to drive sales</h3>
          <p class="text-gray-600">Optio sit exercitationem et ex ullamco aliquid explicabo. Dolore do ut officia anim non ad eu. Magna laboris incididunt commodo elit ipsum.</p>
        </div>
      </div>
    </div>
  </section>

Resources

Free and easy to use resources, vetted by us.

<section class="bg-white py-12">
    <div class="max-w-4xl mx-auto">
      <h2 class="text-3xl font-bold mb-4">Everything you need</h2>
      <h3 class="text-2xl font-bold mb-10">All-in-one platform</h3>
      <p class="text-xl mb-10">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
      
      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        <div>
          <div class="flex items-center mb-4">
            <div class="bg-purple-500 text-white p-2 rounded-full mr-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
              </svg>
            </div>
            <h3 class="text-xl font-bold">Invite team members</h3>
          </div>
          <p class="text-gray-600 ml-12">Rerum repellat labore necessitatibus reprehenderit molestiae praesentium.</p>
        </div>
        
        <div>
          <div class="flex items-center mb-4">
            <div class="bg-purple-500 text-white p-2 rounded-full mr-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
              </svg>
            </div>
            <h3 class="text-xl font-bold">List view</h3>
          </div>
          <p class="text-gray-600 ml-12">Corporis asperiores ed nulla temporibus asperiores non tempore assumenda aut.</p>
        </div>
  
        <div>
          <div class="flex items-center mb-4">
            <div class="bg-purple-500 text-white p-2 rounded-full mr-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z" />
              </svg>
            </div>
            <h3 class="text-xl font-bold">Keyboard shortcuts</h3>
          </div>
          <p class="text-gray-600 ml-12">In sit qui aliquid delenit et. Ad nobis sunt omnis. Quo sapiente dicta laboriosam.</p>
        </div>
  
        <div>
          <div class="flex items-center mb-4">
            <div class="bg-purple-500 text-white p-2 rounded-full mr-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
              </svg>
            </div>
            <h3 class="text-xl font-bold">Calendars</h3>
          </div>
          <p class="text-gray-600 ml-12">Sed rerum sunt dignissimos ullam. Iusto iure occaecati voluptate eligendi fugiat sequi.</p>
        </div>
      </div>
    </div>
  </section>

Gallery

Thrifty websites from the community.

LaunchThrifty

Challenge: astro-loc

Ramen Profitability

Challenge: one-html-file