<p><img src="https://i.imgur.com/XMmLsKi.jpg" alt="Books List Page"></p>
<p><a class="theme-adaptive-bg" target="_blank" rel="noopener noreferrer" href="https://github.com/Nojus0/digital-library"><img height="60rem" src="https://i.imgur.com/d2F6pQ9.png"/></a></p>
<h1 id="where-can-i-find-the-website">Where can I find the website?</h1>
<p>You can visit the website by going to <a target="_blank" rel="noopener noreferrer" href="https://digital-library-main.vercel.app/">digital-library-main.vercel.app</a></p>
<p>Scroll down to view some screenshots of the website.</p>
<br/>

<h1 id="the-goal">The Goal</h1>
<p>Make a web app for libraries and its users that feels more like a social network and provide 
many features for managing books and users. Make the web app feel modern with a modern UI/UX,
animations and full responsiveness.</p>
<br/>

<h1 id="how-are-images-processed">How are images processed?</h1>
<p>The images are processed and compressed on the client-side using the Compressor javascript library, and then sent to a S3 presigned upload URL with the upload size limited to 1MB. For more flexibility and security, you can easily add a GraphQL Mutation that processes the images server-side using the <em>sharp</em> npm package.</p>
<br/>

<h1 id="project-status">Project status</h1>
<p>The project began in 11 July 2021 and finished Decemeber 27 2021</p>
<br/>

<h1 id="tech-stack">Tech stack</h1>
<ul>
<li>Web App<ul>
<li>Next.js</li>
<li>Framer Motion (animations)</li>
<li>MobX (state management)</li>
<li>URQL (graphql client)</li>
</ul>
</li>
<li>Backend<ul>
<li>Apollo Server (graphql)</li>
<li>Json Web Token (authentication)</li>
<li>Postgres (database)</li>
<li>Typeorm</li>
<li>Type-GraphQL</li>
</ul>
</li>
</ul>
<br/>

<h1 id="deployment">Deployment</h1>
<ul>
<li><p>Web App</p>
<ul>
<li>Vercel</li>
</ul>
</li>
<li><p>Backend</p>
<ul>
<li>API deployed to AWS Lambda</li>
<li>Postgres database deployed to AWS RDS</li>
<li>Images hosted on AWS S3 and cached by AWS Cloudfront</li>
</ul>
</li>
</ul>
<br/>

<h1 id="where-can-i-find-the-source-code">Where can I find the Source Code?</h1>
<p>You can find the GitHub repository by scrolling up and clicking the GitHub icon or clicking <a href="https://digital-library-main.vercel.app/">here</a></p>
<br/>



<h1 id="web-app-screenshots">Web App Screenshots</h1>
<p><a href="https://www.figma.com/file/wDSMG2wQ2OrdMRpvtCkeyw/Digital-Library?node-id=323%3A90"><img height="60rem" src="https://i.imgur.com/Y95cqGP.png" /></a></p>
<p><img src="https://i.imgur.com/1kfQoUK.jpg" alt="Home Page">
<img src="https://i.imgur.com/W6EkkPH.jpg" alt="Login Page">
<img src="https://i.imgur.com/qYpvjZW.jpg" alt="Register Page">
<img src="https://i.imgur.com/XMmLsKi.jpg" alt="Books List Page">
<img src="https://i.imgur.com/7PDjRWm.jpg" alt="Search Bar Books">
<img src="https://i.imgur.com/bLpzu3A.jpg" alt="Search Bar User">
<img src="https://i.imgur.com/MrIzuqK.jpg" alt="Book Page">
<img src="https://i.imgur.com/s53pqCR.jpg" alt="Administrator Profile Page">
<img src="https://i.imgur.com/exysv31.jpg" alt="Consumer Profile Page">
<img src="https://i.imgur.com/EE1Kqdj.jpg" alt="Manage Profile">
<img src="https://i.imgur.com/qr94DdZ.jpg" alt="Add Book Page">
<img src="https://i.imgur.com/bzd4u1T.jpg" alt="Edit Book">
<img src="https://i.imgur.com/0iYMAe1.jpg" alt="Delete Book"></p>


A web app meant for libraries, and its users. Users can view all the available books, and view what their friends are currently reading by going to their profile.

Digital Library

Where can I find the website?

The Goal

How are images processed?

Project status

Tech stack

Deployment

Where can I find the Source Code?

Web App Screenshots