natsumi-h / smartinvoice

Fullstack invoice generator app developed by Next.js/ Prisma/ Planetscale(MySQL)/ Typescript

📝SmartInvoice

Smartinvoice is an intuitive application designed for generating professional invoices. It allows users to save their company information, register customer details, and create custom invoices using form inputs. The application features an efficient status management system, viewable through a comprehensive dashboard. Additionally, it supports team collaboration, enabling multiple users to work seamlessly together.

Production URL

https://smartinvoice-sepia.vercel.app

Screenshots

Home(Marketing)

Dashboard

Invoice Detail

Create Invoice

Customers

Customer's Contacts

Technologies Used

Core technologies

• Next.js Ver.14 App Router
• Prisma -ORM
• PlanetScale -MySQL DB
• Typescript
• Mantine -UI Library
• Mantine form -Form validation
• Zod -Form Schema Validation

Other packeges used

• jose -JWT signing and encryption
• Nodemailer -For Email sending
• AmazonS3 -PDF/Org logo image storage
• Puppeteer -Headless browser to convert html to PDF
• dayjs - Date value formatting

Hosting

• Vercel

Documentations

• Wireframe(Figma)
• Page Structure
• API Endpoints
• Database ERD

Key Challenges/Takeaways

Server side rendering vs Client side rendering

• Revision of Client-Side Rendering vs Server-Side Rendering
  • Intro to Single-Page Applications (SPAs) and the MERN-Stack

Soft delete practice

• Considering the impact on SQL relational tables, practiced using the POST method with manipulation of deleted column for all delete operations, instead of the DELETE.

// POST /api/customer/:id
// @desc: Update a single customer
export async function POST(
  request: Request,
  { params }: { params: { id: string } }
) {
  try {
    await checkIfUserIsLoggedIn();
    const body = await request.json();
    const id = params.id;
    const res = await prisma.customer.update({
      where: {
        id: parseInt(id),
      },
      data: {
        ...body,
        deletedAt: body.deleted ? new Date() : null,
      },
      include: {
        contact: true,
      },
    });
    return NextResponse.json(res, { status: 200 });
  } catch (e: any) {
    const message = e.message || "Failed to update customer";
    const status = e.status || 500;
    return NextResponse.json({ message }, { status });
  }
}

Next Steps

• UI Enhancement
  • Next.js loading/cache optimization
  • List sort
  • Rich dashboard for data visualization
• Various cases consideration
  • In case of users belonging to multiple organizations
  • Admin's availability (i.e. Approval for invoice generation by users)
• Security enhancement
  • More secure Email verification token
  • S3 data protection
• No-bug application
  • Implement more secure frontend/backend validation
  • Test driven development

References and Inspirations

• Xero Online Invoicing Software