BloodForAll

View Demo • Report Bug • Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Installation
3. Roadmap
4. License
5. Contact
6. Resources

About The Project

BloodForAll would be the groundwork for either a blood bank or a blood donation informational resource. The goal of this application was to learn the structure of Next.js and use Tailwind to create responsive layouts.

Auth0 was also implemented to see how it worked compared to creating a user database using Node.js. Chart.js was utilized to create an interactive chart on the blood donation page just to make the site a little more pleasent to look at.

While using Tailwind I've learned that it's best to create layouts with mobile first in mind. Building a layout for desktop users and trying to make it work on mobile is way more of a headache than the other way aroud. Learning the shortcuts for Tailwind wasn't too difficult thanks to the 'Tailwind CSS Intellisense' plugin for VSCode.

I used Vercel to host the website (since they created Next.js) for the first time, and much like Netlify it was fairly simple to set up.

Built With

• Next.js

• Tailwind CSS

• Auth0

• Chart.js

Getting Started

To get a local copy up and running follow these simple steps.

Installation

1. Clone the repo

   git clone https://github.com/PhilipBDev/BloodForAll.git

2. Install NPM packages

   npm install

3. Create an ENV file with the following attributes to set up Auth0 properly:

   AUTH0_SECRET=
   AUTH0_BASE_URL='http://localhost:3000'
   AUTH0_ISSUER_BASE_URL=
   AUTH0_CLIENT_ID=
   AUTH0_CLIENT_SECRET=

Roadmap

See the open issues for a list of proposed features (and known issues).

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Your Name - @PhilipBDev - PhilipBDev@gmail.com

Project Link: https://github.com/PhilipBDev/BloodForAll

Resources

• Vercel
• Namecheap