Our Journey Building The Big Alliance Donation Website

What Inspired Us

We were inspired by the chance to create something that could genuinely help The Big Alliance in their mission. Knowing that our work could make it easier for people to donate and support a good cause motivated us to dive into this project.

What We Learned

Throughout this project, we learned a lot about building a full-stack application using Next.js. We got hands-on experience with:

• Next.js and JavaScript: Building dynamic web pages that are fast and responsive.
• Prisma ORM: Simplifying our database interactions and making our code cleaner.
• NextAuth: Implementing secure authentication and handling user sessions.
• PayPal Integration: Processing payments securely and ensuring donors have a smooth experience.
• OWASP Best Practices: Keeping our application secure against common web vulnerabilities.

We also learned the importance of teamwork and communication. By collaborating closely, we were able to overcome obstacles and build a better product.

How We Built Our Project

We started by carefully reading the requirements and planning out the features we needed to implement. Here's how we approached it:

1. Planning and Design:

   • Mapped out the user journeys for both donors and admins.
   • Created wireframes to visualize the layout and flow of the website.
   • Prioritized features to make sure we focused on the most important parts first.

2. Development:

   • Set up a Next.js project and configured it for our needs.
   • Used Prisma ORM to interact with our database efficiently.
   • Implemented authentication with NextAuth, adding features like password reset and multi-factor authentication.
   • Built the admin dashboard for campaign management and reporting.
   • Ensured all forms had proper validation and followed accessibility guidelines.

3. Deployment:

   • Deployed the application on Vercel, which works great with Next.js projects.
   • Tested the website on different devices to make sure it looks good and works well everywhere.

Challenges We Faced

We encountered a few challenges along the way:

• Security vs. Usability: Adding security features like CAPTCHA and multi-factor authentication without making the login process frustrating was tricky. We had to find the right balance.
• PayPal Integration: Working with payment systems can be complex. We spent time understanding PayPal's API to make sure donations were processed correctly.
• Time Management: With so many features to implement, it was challenging to get everything done on time. We had to prioritize tasks and sometimes make tough decisions about what to include.
• Learning New Technologies: Some of us were new to tools like Prisma and NextAuth, so there was a learning curve. But collaborating and sharing knowledge helped us overcome this.

Conclusion

Building this donation website was a rewarding experience. We're proud of what we've accomplished and how it can help The Big Alliance. We believe that with this platform, it'll be easier for people to contribute to campaigns and for admins to manage donations effectively.

Thank you for taking the time to hear about our project!

Built With

• clerk
• next.js
• paypal
• prisma
• typescript