🛠️ Develop Apps with nextpy

Note

If you need assistance or encounter any bugs, our AI assistant is ready to help on our Discord. Additionally, the nextpy community and team are always available to support you. Post is in ❔help channel.

• Repository: Check it out at https://github.com/dot-agent/nextpy/ 🌍
• Documentation: Dive into the nextpy Documentation for details 📚

🐍✨ Creating your first app with nextpy? It's easy and fast! Even with basic Python knowledge, you can have an app up and running in just ⚡20 minutes

Important

Utilize the Next.py library as the foundation for your app development. This will allow us to assess your proficiency in rapidly adapting to new technologies.

Choose Your Idea & Level

Feel free to choose a project that you feel comfotable with. Once you’re done, make a public repo on GitHub and send us the link at [email protected]. 🚀📧 Don’t forget to share your awesome work at the 🦄project-showcase channel on our discord.

Tier-1: Beginner Projects

Name	Short Description	Tier
Bin2Dec	Binary-to-Decimal number converter	1-Beginner
Border Radius Previewer	Preview how CSS3 border-radius values affect an element	1-Beginner
Calculator	Calculator	1-Beginner
Christmas Lights	Simulate a string of Christmas lights	1-Beginner
Cause Effect App	Click list item to display item details	1-Beginner
Color Cycle	Cycle a color value through incremental changes	1-Beginner
Countdown Timer	Event Countdown timer	1-Beginner
CSV2JSON App	CSV to JSON converter	1-Beginner
Dollars to Cents	Convert dollars to cents	1-Beginner
Dynamic CSS Variables	Dynamically change CSS variable settings	1-Beginner
First DB App	Your first Database app!	1-Beginner
Flip Image	Change the orientation of images across two axes	1-Beginner
GitHub Status	Display Current GitHub Status	1-Beginner
Hello	User native language greeting	1-Beginner
IOT Mailbox Simulator	Use callbacks to check your snail mail	1-Beginner
JS Input Validation	Script to validate inputs entered by a user using RegEx	1-Beginner
JSON2CSV App	JSON to CSV converter	1-Beginner
Key Value	Keyboard Event Values	1-Beginner
Lorem Ipsum Generator	Generate lorem ipsum placeholder text	1-Beginner
Notes App	Create an online note pad	1-Beginner
Pearson Regression	Calculate the correlation coefficient for two sets of data	1-Beginner
Pomodoro Clock	Task timer to aid personal productivity	1-Beginner
Product Landing Page	Showcase product details for possible buyers	1-Beginner
Quiz App	Test your knowledge by answering questions	1-Beginner
Recipe App	Recipe	1-Beginner
Random Meal Generator	Generate random meals	1-Beginner
Random Number Generator	Generate random number between range.	1-Beginner
Roman to Decimal Converter	Convert Roman to Decimal numbers	1-Beginner
Slider Design	Display images using a slider control	1-Beginner
Stopwatch App	Count time spent on activities	1-Beginner
TrueOrFalse	Identify the result of a conditional comparison	1-Beginner
Vigenere Cipher	Encrypt text using the Vigenere Cypher	1-Beginner
Wind Chill	Calculate the windchill factor from an actual temperature	1-Beginner
Word Frequency	Calculate word frequency in a block of text	1-Beginner
Weather App	Get the temperature, weather condition of a city.	1-Beginner

Tier-2: Intermediate Projects

Name	Short Description	Tier
Bit Masks	Using Bit Masks for Conditions	2-Intermediate
Book Finder App	Search for books by multiple criteria	2-Intermediate
Calculator CLI	Create a basic calculator cli.	2-Intermediate
Card Memory Game	Memorize and match hidden images	2-Intermediate
Charity Finder App	Find a Global Charity to donate to	2-Intermediate
Chrome Theme Extension	Build your own chrome theme extention.	2-Intermediate
Currency Converter	Convert one currency to another.	2-Intermediate
Drawing App	Create digital artwork on the web	2-Intermediate
Emoji Translator App	Translate sentences into Emoji	2-Intermediate
Flashcards App	Review and test your knowledge through Flash Cards	2-Intermediate
Flip Art App	Animate a set of images	2-Intermediate
Game Suggestion App	Create polls to decide what games to play	2-Intermediate
GitHub Profiles	A GitHub user search App	2-Intermediate
HighStriker Game	Highstriker strongman carnival game	2-Intermediate
Image Scanner	Image Scanner App	2-Intermediate
Markdown Previewer	Preview text formatted in GitHub flavored markdown	2-Intermediate
Markdown Table Generator	Convert a table into Markdown-formatted text	2-Intermediate
Math Editor	A math editor for students to use	2-Intermediate
Meme Generator App	Create custom memes	2-Intermediate
Name Generation using RNNs	Generate names using names dataset	2-Intermediate
Password Generator	Generate random passwords	2-Intermediate
Podcast Directory	Directory of favorite podcasts	2-Intermediate
QR Code Badge Generator	Encode badge info in a QRcode	2-Intermediate
Regular Expression Helper	Test Regular Expressions	2-Intermediate
Sales Reciepts App	Record Sales Receipts in a DB	2-Intermediate
Simple Online Store	Simple Online Store	2-Intermediate
Sports Bracket Generator	Generate a sports bracket diagram	2-Intermediate
String Art	An animation of moving, colored strings	2-Intermediate
This or That Game	This or That Game	2-Intermediate
Timezone Slackbot	Display Team Timezones	2-Intermediate
To-Do App	Manage personal to-do tasks	2-Intermediate
Typing Practice	Typing Practice	2-Intermediate
Voting App	Voting App	2-Intermediate

Tier-3: Advanced Projects

Name	Short Description	Tier
Battleship Bot	Create a Discord bot that plays Battleship	3-Advanced
Battleship Game Engine	Create a callable engine to play the Battleship game	3-Advanced
Boole Bots Game	Battling Bots driven by Boolean algebra	3-Advanced
Calendar	Create your own Calendar	3-Advanced
Calorie Counter	Calorie Counter Nutrition App	3-Advanced
Chat App	Real-time chat interface	3-Advanced
Contribution Tracker App	Track funds donated to charity	3-Advanced
Elevator	Elevator simulator	3-Advanced
Fast Food Simulator	Fast Food Restaurant Simulator	3-Advanced
Instagram Clone	A clone of Facebook's Instagram app	3-Advanced
GitHub Timeline	Generate a timeline of a users GitHub Repos	3-Advanced
Kudos Slackbot	Give recognition to a deserving peer	3-Advanced
Movie App	Browse, Find Ratings, Check Actors and Find you next movie to watch	3-Advanced
MyPodcast Library	Create a library of favorite podcasts	3-Advanced
NASA Exoplanet Query	Query NASA's Exoplanet Archive	3-Advanced
Shell Game	Animated shell game	3-Advanced
Shuffle Deck	Evaluate different algorithms for shuffling a card deck	3-Advanced
Slack Archiver	Archive Slack Messages	3-Advanced
Spell-It App	A twist on the classic Speak N Spell game	3-Advanced
Survey App	Define, conduct, and view a survey	3-Advanced

💡 Nextpy Key Features

Simplifying App Development:🧩

• 🐍 Unleash Python's Full Potential - Eliminate complexities and build everything—frontend and backend—in Python, seamlessly integrating any Python library.
• 🎨 Rich UI Library - Over 100 fully customizable built-in components for rapid UI development.
• ⚛️ Tap into React's Power with Pythonic Wrappers - Harness the vast React ecosystem directly within Python, utilizing any React library without JavaScript knowledge.
• 🚀 Built-in Performance Optimizations - Deliver exceptional user experiences with automatic image, font, and script optimizations for lightning-fast loading speeds and responsiveness. See the difference for yourself at nextpy.org.

Better AI Generations: ‍🤖

• 🧠 More Effective Than Chaining or Prompt Engineering - Next.py aligns with LLM processing patterns, enabling precise output control and optimal model utilization.
• 💡 Optimized for Code Generation - Regardless of the LLMs, prompts, or fine-tuning used, the underlying app framework significantly impacts the efficiency of code generation. Next.py's architecture is specifically engineered to maximize efficiency.
• 💾 Session State with LLM - Efficiently maintain state with LLMs, leveraging KV caches to convert multiple output tokens into prompt token batches. This approach reduces redundant generations, accelerating the handling of lengthy and intricate prompts. (only for open-source models)
• 🧪 Detect Syntax Errors: Test LLM-generated code, identifying and correcting LLM hallucinations, invalid Nextpy methods, and automatically generating prompts for seamless fixes.

Developer-First: ❤️

• 📘 Transferable Knowledge - Learning Next.py instills framework-agnostic fundamentals, enhancing your app development expertise and enabling you to excel across any frameworks.
• 🛠️ Extensible - If you know how to do something in Python or plain English, you can integrate it with nextpy.

🚀 Quick Start (2 mins)

1. Installing Nextpy

Open your terminal and prepare for an adventure of a lifetime!

pip install nextpy

(Remember, Python 3.7 or later is required.)

2. Initializing Your App

Navigate to the desired directory for your project in the terminal. Use the nextpy init command to initialize a template app in your new directory.

nextpy init

3. Choose your template:

For now, just press enter to automatically default to the blank template.

    Blank Template: A simple single page template
    Base Template: A multi-page app with a sidebar

4. Running the App

In the same directory where you previously ran nextpy init, enter the following command:

nextpy run

5. View the App:

Check out your app by visiting http://localhost:3000

Note

Your application is now fully functional. To view the frontend, navigate to localhost:3000. The backend server is accessible at localhost:8000. While it's unlikely you'll ever directly interact with it, the backend API documentation can be found at localhost:8000/docs, and the openapi.json file is located at localhost:8000/openapi.json.

🎨 Start with a template!

We speedup your development with a ever growing list of community templates. Some examples:

Powerful tables	Portfolio Sites	Interactive Charts	AI chat	Crud Apps	Onboarding

Setting Up the Template

1. Copy the template files to your local folder.
2. Install necessary dependencies with pip install -r requirements.txt.
3. Initialize your app by running nextpy init.
4. Launch the app with nextpy run to see it in action. To check the site visit localhost:3000

➖ or ➖

---

🤣 Building a Joke Generator App (5 mins)

Edit myapp/myapp.py to create your app.

1. Import Libraries

import nextpy as xt
import pyjokes

Start by importing nextpy for development and pyjokes for random jokes.

2. Set Up the App State

class State(xt.State):
    joke: str = "Click the button to get a joke!"

    def generate_joke(self):
        self.joke = pyjokes.get_joke()

Create a State class with a joke variable. Use generate_joke to fetch new jokes.

3. Design the Main Page

def index():
    layout = xt.vstack(
        xt.text(State.joke, font_size="2em"),
        xt.button("Generate Joke", on_click=State.generate_joke),
    )
    return layout

The index function arranges a joke display and a button. vstack is used to stack components vertically, while hstack is used to stack components horizontally.

4. Optional Styling

def index():
    layout = xt.vstack(
        xt.text(State.joke, font_size="2em"),
        xt.button("Generate Joke", on_click=State.generate_joke),

        spacing="1em",
        align_items="center",
        justify_content="center",
        height="100vh",
   )
    return layout

The spacing attribute adds space between the text and button elements, while align_items and justify_content ensure that these elements are centered. The stack's height is set to 100% of the Viewport Height (100vh), which allows the vertical stack to fill the entire height of your screen.

5. Setup the app

app = xt.App()
app.add_page(index)

Set up the app, add the main page. To view the frontend, navigate to localhost:3000.

🛣️ Project Roadmap

🌟 Upcoming Features

1. Frontend Magic Components

   • 🪄 PDF Resume to Personal Site: Create a "magic component" that converts PDF resumes into customizable, full-stack personal websites.

2. Backend Modules

   • 🔐 User Authentication and Email Integration: Add modules for robust login functionality and email subscription.
   • 🛒 Modules for Blogging and E-commerce: Add backend modules to facilitate blog management and e-commerce webapps.

3. Build and Performance Optimization

   • 🔧 Compiler Enhancement with Rust or mojo: Transitioning our existing compiler to Rust or mojo to achieve faster performance.

4. Generative AI

   • 🐍 Nextpy LLM: Build the best Python LLM.
   • 💬 End-User Copilot Feature: A chat-based copilot for app users that lets them interact with your product and do things by text. We have all the modules ready for this, we just need to simplify the abstraction. Just set copilot = True in xtconfig and you’re should be good to go.

🤗 Get Involved

We welcome contributors of all skill levels! 🤝

Want to make a difference? Start by forking our repository and sending in your pull requests. We're excited to welcome you to our community. Together, we'll craft something truly remarkable! ✨

Be an Open Source Champion🏆:

⭐ Help us spread the love: Please star the nextpy repo. Spread nextpy love in your communities. 🌐❤️ 🤗 Contribute to nextpy: Take an active role in its evolution. Your input matters! 🚀