Astrophotography Website
Tags: atlashackathon
Published: 2022-01-08 08:14:28

[Instructions]: # (To submit to the MongoDB Atlas Hackathon on DEV, please fill out all sections.)


### Overview of My Submission
[Note]: # (Please make sure the project links to the appropriate GitHub repository, and includes the [Apache-2 permissive license](https://www.apache.org/licenses/LICENSE-2.0)  and README.)

The project that I decided to do for this hackathon was one that I had on my bucket list for a while, but I was never able to do because of how busy I was. Now I finally have the motivation to do and so I decided to complete my astrophotography website. I have a rather decent telescope and I like taking images of everything I look at through it and so wanted to build a website that would let me share the photo I had taken with my telescope. That is the purpose of this website, to share the images that I have taken so far with my telescope. This website stores each image using MongoDB as the database and then delivers it to the user through the use of Nodejs and Expressjs. This website is designed to run on the Heroku hosting service and I have already deployed it there. [Here is the link to the website](https://astrophotography.herokuapp.com/)

![Home Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/heeb0c3m7xg6b6isv6bz.png)
 
For the general visitors of my website, the website features a landing or home page.

![List of Images](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gggkj77nih5ae0vnauuc.png)
![Image View](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rwnghysve422vouhnb6t.png)

A page that displays all the images posted to my site as well as a personal view for each image where one can also see the information about each image and a link to view the full-sized image.

![Contact Form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/smelogzsansvfqypbt9u.png)

A contact me form where one can message me either through the form or by directly emailing me.

![About Me](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1e70uel8m4usim8kk2dz.png) 

An about me page that shows each telescope that I have, and I am using (just one telescope right now) and the license for the content on my website.

![Admin Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q2pvtt8rbx6veehgyp8x.png) 

Beyond that, I've created a simple admin page that lets me manage the content on my website.

![Add Image Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rlnuv1mujxku14vy3b2w.png)

I can upload a new image to the website. Whenever I upload an image, the web app also creates two more version of that image, one for smaller viewing and the other as a thumbnail, to help with the performance of the website.

![Edit Image Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p8lfs9m0gqfu507pamsr.png) 

I can also edit the information about each image from the admin page.

![Delete Image Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xyn8s34sizduq0f9nwza.png) 

I can also delete each image if I so choose to. Thus, I have complete CRUD functions from the admin page.

![Login Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/287i4yjs7156mgfh8esw.png) 

I've also created an authenticating system to protect the content on my website so no one can come and mess up my data.

![Smartphone View](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1fhxzi3kvtej5ylwguet.png) 

For the frontend of my website, I tried to make each web page as simple as possible for the best performance. I've use Nunjuck as the templating engine because it is a port of Jinja2 which I am used to, and it has good documentation. Each page is designed to be responsive, so it looks good on a smartphone as well as a desktop computer. Very little JavaScript was used in the frontend. I only needed to use JavaScript for the menu.


### Submission Category: 

[Note]: # (E-Commerce Creation, Prime Time, Action Star, Automation Innovation, or Choose Your Own Adventure)

The category for this submission would be Choose Your Own Adventure. This is because it doesn't fit into the other categories, and I know it is not a super fancy web app nor something that is really wacky, but it is something I wanted to create for a long time now.


### Link to Code

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)

{% github nwrocketman64/astrophotography-website %}

[Link to my Astrophotography Website](https://astrophotography.herokuapp.com/)


### Additional Resources / Info

I build web app on my own personal computer with [Nodejs](https://nodejs.org/en/) and [VS code](https://code.visualstudio.com/). I also did some development on my Raspberry Pi Computers (Because I could so I did).

These are the libraries that I used to complete the project.

* [Express](https://expressjs.com/) - The main web framework.
* [Express Session](http://expressjs.com/en/resources/middleware/session.html) - Used to make logging in possible.
* [Express Validator](https://express-validator.github.io/docs/) - Used to validate and sanitize user inputs.
* [Csurf](http://expressjs.com/en/resources/middleware/csurf.html) - Provide CSRF protection to the website.
* [Bcypt](https://www.npmjs.com/package/bcrypt) - Used to encrypt passwords and compare hashes.
* [Mongoose](https://mongoosejs.com/) - The library used to control the MongoDB.
* [Multer](https://www.npmjs.com/package/multer) - Used to process images submitted to the webite.
* [Nodemailer](https://nodemailer.com/about/) - Used in the contact form to send an email to myself.
* [Nunjucks](https://mozilla.github.io/nunjucks/) - The main templating engine used in the project. It's basically a port of the Jinja2 templating engine that you would use in Python Flask and Python Django.
* [Nunjucks Date](https://www.npmjs.com/package/nunjucks-date) - Provides a date filter for the templating engine.
* [Sharp](https://sharp.pixelplumbing.com/) - The library used to process the images when received.
* [Nodemon](https://nodemon.io/) - Used in developing the web app as it restarts the app every time you make a change.

These are some of articles / tutorials that really helped me learn use Nodejs and add some of the features of the web application.

* [NodeJS - The Complete Guide (MVC, REST APIs, GraphQL, Deno)](https://www.udemy.com/course/nodejs-the-complete-guide/)
* [Upload and Retrieve Image on MongoDB using Mongoose](https://www.geeksforgeeks.org/upload-and-retrieve-image-on-mongodb-using-mongoose/)
* [Create Pagination with Node.js, MongoDB, Express and EJS Step by Step from Scratch](https://evdokimovm.github.io/javascript/nodejs/mongodb/pagination/expressjs/ejs/bootstrap/2017/08/20/create-pagination-with-nodejs-mongodb-express-and-ejs-step-by-step-from-scratch.html)
* [Mongoose Count](https://kb.objectrocket.com/mongo-db/mongoose-count-726)
* [How To Process Images in Node.js With Sharp](https://www.digitalocean.com/community/tutorials/how-to-process-images-in-node-js-with-sharp)
* [Templating](https://mozilla.github.io/nunjucks/templating.html)
* [Node.js Send an Email](https://www.w3schools.com/nodejs/nodejs_email.asp)
* [ExpressJS Tutorial](https://www.tutorialspoint.com/expressjs/index.htm)

[Note]: # (Be sure to include the DEV usernames of your collaborators, if any. Prizes for winning projects with multiple collaborators will be sent to the person who posts this submission and they will distribute the prize evenly.)

[Reminder]: # (Submissions are due on January 13th, 2022 @ 11:59 PM PT/2 AM ET on January 14th, 2022/6 AM UTC on January 14th, 2022)