An app to upload files to google drive built with Next.js.

Live site

🛠 Tools

I've used the new App router from Next.js 13, as well as the new route handlers to create API endpoints. Other tools I've used are Next Auth for google authentication, Google Drive API, and Framer Motion for animations. The deployment was done with Vercel.

⚡️ Features

• Redesigned screens to give the app a unique look. Here's the figma file

• Animations and effects. There's animations at page load and also a cool effect when dropping files, thanks to css animations and Framer Motion.

• Responsive app. Adapted to all kinds of devices.

• Authentication with Next Auth. Protected Routes.

• Connecting to Google Drive API. Showing result messages.

• Deployment to Vercel.

✅ Code quality

The code has been checked with SonarCloud and it passed all tests:

🗂 Folder layout

This is a regular Next 13 app, so you'll find:

• The app directory, holding all the routes as page.js files. This is folder-based routing, so /upload/page.js can be accessed at https://mainurl.com/upload.
• The api folder (inside app), which is used to generate API endpoints. Here I've employed it to handle authentication with Next Auth.
• The components folder, which collects all standalone components. In this case simply a Provider for authentication.
• The public folder, which contains all assets.

🏁 Start the app

To start the app and run it on a local development server, you must simply run npm run dev.

If you want to test a production ready build, you'll have to run npm run build and, when that's done, npm run start.

🚀 Roadmap

• Allow multiple file upload