This project solution is an Online voters system purposely created to be used by university students. The project was built using (React)Next.js template, Next Auth, Cloudinary and MongoDB integration, and Typescript. The system allows users to login or register (as either students, professor, or Admin). Login process is quite simple and intuitive, with auto role detection, for viewing intended users voters page. Read more to understand the solution at my GitHub repository: https://github.com/Jaweki/online-students-voting-system

• Overview
  • Getting Started
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

To see specific project dependancies, take a look at the package.json file in the root folder.

Open http://localhost:3000 with your browser to see the result. This project uses next/font to automatically optimize and load Inter, a custom Google Font.

• Solution URL: github repo
• Live Site URL: deployment on vercel

• Mobile-first workflow
• TypeScript - a superset of javascript.
• Tailwindcss - CSS framework
• React - JS library
• Next.js - React framework
• MongoDB - Document oriented Database.
• Cloudinary - Multimedia Storage

While this project was a great opportunity to sharpen my web development skills, the following skills were newly learnt:

• intergration of the web app to cloudinary. So, when a new user is registering in to the system, they upload their profile avatar(image). The image, is stored on cloudinary, and so the app had to intergrate with the api. Check out the code snipet below:

const uploadImage = async () => {
  if (file) {
    try {
      const formData = new FormData();
      formData.append("file", file);
      formData.append("upload_preset", "upload_folder");

      const response = await fetch(
        "https://api.cloudinary.com/v1_1/cloud-name/image/upload",
        {
          method: "POST",
          body: formData,
        }
      );

      const data = await response.json();

      return data.secure_url;
    } catch (error) {
      console.error("Error uploading image: ", error);
      alert("Error Uploading image!");
    }
  }
};

• handling a Drag and drop on a html div element, which receives the image. view code

• Above all, the most interesting part of the project was designing and implementing the users config file document that is saved in the db. This was key especially when it comes to keeping track of votes a user paticipated in. view mongoose schemas.

This project is still under scheduled development. The following details will be implemented:

1. The admin will have a grant to edit and/or delete old or unnecessary ballots,
2. Implementation of Ballot analytics. For each ballot we need to know out of all users how many users have voted, probably view in a graph.
3. For all users, Old and currently active ballots should be separated in the view.
4. Implement search functionality for our web app.

Stay tunned for this updates soon.

• Next.js dev Docs - To know more about functionalities like routing, implementing loaders, or utilities like the Image element lazy loading
• Next Auth Custom credentials provider - To Learn more about how to intergrate an email custom credentials provider, or be able to keep track of user session as used in this web app, read the next auth docs.
• Cloudinary - Familiarlize your self with this cloud storage solution, popular for its utility in multimedia storage.
• MongoDB - Learn more about document oriented, easy to implement and extend database.
• vercel - For react and next.js project, vercel a aids in deployment of live site web apps. visit their site to learn more.

• Website - Jack Weru | Jaweki

To begin with, am proud to have been able to complete and delive the mvp of this web app project. The University lecturers at Zetec university appreciated my solution, and recommended i develop it fully for it to be used by students.

More to that, great thanks to AbdiRhamman Khalif Mohamed a student at Zetec university, who reach out to ask for a prototype of the initial designed system. With his co-operation we choose the right theme for the web app, user interactivity and responsiveness and people loved it.

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out the Next.js deployment documentation for more details.