I developed Accred as a side project due to the struggles I faced in managing e-certificate generation for the Google Developer Student Clubs at the University of San Carlos. Our existing process of generating and storing certificates in our drive was time-consuming and required constant work from the core team. Additionally, it was taking up a significant amount of storage space.
To overcome these challenges, I created Accred to automate the certificate generation process and eliminate the need for storing them in the cloud. My app generated certificates on-demand, ensuring that no unnecessary data was stored and saving valuable storage space.
Additionally, developing Accred served as an opportunity for me to gain hands-on experience and enhance my knowledge of Next.js and its app router. Throughout the development process, I delved into the intricacies of Next.js, leveraging its powerful features to create a seamless and efficient user experience.
By working on Accred, I not only addressed the pressing issue of e-certificate management but also utilized it as a practical learning experience. Exploring the capabilities of Next.js and its app router allowed me to expand my skill set and deepen my understanding of web development frameworks. This project served as a valuable stepping stone in my journey to becoming a proficient developer, providing me with practical insights and expertise that I can apply to future projects.
Client:
Server:
Clone the project
git clone https://github.com/blurridge/AccredGo to the project's directory
cd Accred/Install dependencies
npm installCreate a .env file containing your Firebase variables. Use .env.example as a template.
NEXT_PUBLIC_FIREBASE_API_KEY = <<your firebase api key here>>
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN = <<your firebase auth domain here>>
NEXT_PUBLIC_FIREBASE_PROJECT_ID = <<your firebase project id here>>
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET = <<your firebase storage bucket here>>
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID = <<your firebase messaging sender id here>>
NEXT_PUBLIC_FIREBASE_APP_ID = <<your firebase app id here>>
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID = <<your firebase measurement id here>>
Start the server
npm run dev📦
├─ .env.example
├─ .eslintrc.json
├─ .gitignore
├─ LICENSE
├─ README.md
├─ app
│ ├─ admin
│ │ ├─ home
│ │ │ ├─ layout.tsx
│ │ │ └─ page.tsx
│ │ ├─ login
│ │ │ └─ page.tsx
│ │ └─ page.tsx
│ ├─ contact
│ │ ├─ layout.tsx
│ │ └─ page.tsx
│ ├─ docs
│ │ ├─ layout.tsx
│ │ └─ page.tsx
│ ├─ event
│ │ └─ [id]
│ │ ├─ certificate
│ │ │ └─ [certId]
│ │ │ └─ page.tsx
│ │ ├─ layout.tsx
│ │ └─ page.tsx
│ ├─ favicon.ico
│ ├─ globals.css
│ ├─ layout.tsx
│ ├─ mdx-components.tsx
│ └─ page.tsx
├─ assets
│ ├─ accred_logo.svg
│ ├─ accred_ls.svg
│ ├─ accred_sq.svg
│ └─ gdsc_logo.png
├─ components
│ ├─ AddEvent.tsx
│ ├─ AdminGuide.mdx
│ ├─ AdminLoginButton.tsx
│ ├─ Certificate.tsx
│ ├─ CertificateVerifier.tsx
│ ├─ ContactMe.mdx
│ ├─ DataTable.tsx
│ ├─ EventCard.tsx
│ ├─ EventCardContent.tsx
│ ├─ EventDropdown.tsx
│ ├─ EventForm.tsx
│ ├─ FeatureCards.tsx
│ ├─ Footer.tsx
│ ├─ GuestLoginButton.tsx
│ ├─ LoginCard.tsx
│ ├─ Navbar.tsx
│ ├─ RingLoader.tsx
│ └─ ui
│ ├─ avatar.tsx
│ ├─ button.tsx
│ ├─ calendar.tsx
│ ├─ card.tsx
│ ├─ columns.tsx
│ ├─ dialog.tsx
│ ├─ dropdown-menu.tsx
│ ├─ form.tsx
│ ├─ input.tsx
│ ├─ label.tsx
│ ├─ navigation-menu.tsx
│ ├─ popover.tsx
│ └─ table.tsx
├─ context
│ ├─ AuthContext.tsx
│ ├─ EventDataContext.tsx
│ └─ ThemeContext.tsx
├─ firebase
│ └─ config.ts
├─ lib
│ └─ utils.ts
├─ next.config.js
├─ package-lock.json
├─ package.json
├─ postcss.config.js
├─ public
│ ├─ next.svg
│ └─ vercel.svg
├─ tailwind.config.js
├─ tsconfig.json
└─ utils
├─ compressBanner.ts
├─ deleteFromFirebase.ts
├─ fetchImageSize.ts
├─ generateLinkedInShareURL.ts
├─ parseCSV.ts
├─ uploadToFirestore.ts
└─ uploadToStorage.ts
I would like to acknowledge the work of Ned Palacios and GDSC University of Immaculate Conception as the inspiration for this project's concept of certificate generation which was originally done in Vue for LAWIG - a GDSC Philippines Info Session.
If you have any questions, suggestions, need further assistance, or would like to avail of Accred for your organization, feel free to reach out to me. I'm always happy to help!
- Email: [email protected]
- GitHub: @blurridge
- Twitter: @zachahalol
- Instagram: @zachahalol
- LinkedIn: Zach Riane Machacon
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent