CelestiaLog: A Beginner-Friendly Astronomy Logging Web App
CelestiaLog: A Beginner-Friendly Astronomy Logging Web App
CelestiaLog: A Beginner-Friendly Astronomy Logging Web App
Timeline:
6 weeks (Oct-Nov 2025)
Skills:
HTML, CSS, & JS; Basic API & Database Knowledge; UX/UI Design; Product Design; Visual Design; Wireframes, Mockups, & Prototypes
Tools:
Visual Studio Code, MongoDB, Vercel, GitHub, GitHub Copilot, Claude, Figma
GitHub repository:
Available through this link
Timeline:
6 weeks (Oct-Nov 2025)
Skills:
HTML, CSS, & JS; Basic API & Database Knowledge; UX/UI Design; Product Design; Visual Design; Wireframes, Mockups, & Prototypes
Tools:
Visual Studio Code, MongoDB, Vercel, GitHub, GitHub Copilot, Claude, Figma
GitHub repository:
Available through this link
Timeline:
6 weeks (Oct-Nov 2025)
Skills:
HTML, CSS, & JS; Basic API & Database Knowledge; UX/UI Design; Product Design; Visual Design; Wireframes, Mockups, & Prototypes
Tools:
Visual Studio Code, MongoDB, Vercel, GitHub, GitHub Copilot, Claude, Figma
GitHub repository:
Available through this link
Overview
Overview
Overview
Problem:
Problem:
Problem:
During research into existing astronomy logging platforms, it became clear that many tools were designed for experienced users and include complex interfaces, terminology, and workflows. This level of complexity makes them less approachable for beginners or casual astronomers who simply want to record and revisit their night sky observations.
During research into existing astronomy logging platforms, it became clear that many tools were designed for experienced users and include complex interfaces, terminology, and workflows. This level of complexity makes them less approachable for beginners or casual astronomers who simply want to record and revisit their night sky observations.
During research into existing astronomy logging platforms, it became clear that many tools were designed for experienced users and include complex interfaces, terminology, and workflows. This level of complexity makes them less approachable for beginners or casual astronomers who simply want to record and revisit their night sky observations.
Approach:
Approach:
Approach:
The project focused on designing a simple, database-driven web app informed by competitive analysis of existing astronomy and logging platforms. UX decisions emphasized minimal required fields, clear form validation, chronological data display, and a clean, dark interface optimized for nighttime use, while the system was designed to reliably save, update, and manage user entries.
The project focused on designing a simple, database-driven web app informed by competitive analysis of existing astronomy and logging platforms. UX decisions emphasized minimal required fields, clear form validation, chronological data display, and a clean, dark interface optimized for nighttime use, while the system was designed to reliably save, update, and manage user entries.
The project focused on designing a simple, database-driven web app informed by competitive analysis of existing astronomy and logging platforms. UX decisions emphasized minimal required fields, clear form validation, chronological data display, and a clean, dark interface optimized for nighttime use, while the system was designed to reliably save, update, and manage user entries.
Solution:
Solution:
Solution:
The result is CelestiaLog, a beginner-friendly astronomy logging web app that allows users to easily create, edit, and review observation entries in a clear, chronological timeline. By combining intuitive UX patterns with dependable data handling, the app reduces cognitive load and enables users to focus on observing and recording the night sky rather than navigating complex tools.
The result is CelestiaLog, a beginner-friendly astronomy logging web app that allows users to easily create, edit, and review observation entries in a clear, chronological timeline. By combining intuitive UX patterns with dependable data handling, the app reduces cognitive load and enables users to focus on observing and recording the night sky rather than navigating complex tools.
The result is CelestiaLog, a beginner-friendly astronomy logging web app that allows users to easily create, edit, and review observation entries in a clear, chronological timeline. By combining intuitive UX patterns with dependable data handling, the app reduces cognitive load and enables users to focus on observing and recording the night sky rather than navigating complex tools.
Competitive Landscape Research
Competitive Landscape Research
Competitive Landscape Research
The following research were completed based on similar or related websites/apps. Included in this exploration are Stellarium Web and Telescopius (which are specifically for astronomy logging), and eBird and iNaturalist (non-astronomy platforms, but both employ a structure that is very applicable to astronomy logs).
The following research were completed based on similar or related websites/apps. Included in this exploration are Stellarium Web and Telescopius (which are specifically for astronomy logging), and eBird and iNaturalist (non-astronomy platforms, but both employ a structure that is very applicable to astronomy logs).
The following research were completed based on similar or related websites/apps. Included in this exploration are Stellarium Web and Telescopius (which are specifically for astronomy logging), and eBird and iNaturalist (non-astronomy platforms, but both employ a structure that is very applicable to astronomy logs).
UI Design Research
UI Design Research
UI Design Research
Dark UI has become very common in astronomy apps:
It is best for the eyes to fully ‘dark adapt’ (or the process by which our eyes recover from sensitivity to light after exposure to a bright environment) in order to see as much as possible when looking at the night sky
Dark UI helps preserve night vision; a red screen filter/mode has even been employed in some astronomy platforms
For this web app:
Our users will likely be outside at night as they use this astronomy logging web app
They will most likely not want their night vision destroyed as they quickly log their observations; in this case, a darker interface will be employed on its design
To make it beginner-friendly, it will be designed with a clean, sleek, modern interface, making it feel approachable instead of intimidating for our casual night sky watchers
Dark UI has become very common in astronomy apps:
It is best for the eyes to fully ‘dark adapt’ (or the process by which our eyes recover from sensitivity to light after exposure to a bright environment) in order to see as much as possible when looking at the night sky
Dark UI helps preserve night vision; a red screen filter/mode has even been employed in some astronomy platforms
For this web app:
Our users will likely be outside at night as they use this astronomy logging web app
They will most likely not want their night vision destroyed as they quickly log their observations; in this case, a darker interface will be employed on its design
To make it beginner-friendly, it will be designed with a clean, sleek, modern interface, making it feel approachable instead of intimidating for our casual night sky watchers
Dark UI has become very common in astronomy apps:
It is best for the eyes to fully ‘dark adapt’ (or the process by which our eyes recover from sensitivity to light after exposure to a bright environment) in order to see as much as possible when looking at the night sky
Dark UI helps preserve night vision; a red screen filter/mode has even been employed in some astronomy platforms
For this web app:
Our users will likely be outside at night as they use this astronomy logging web app
They will most likely not want their night vision destroyed as they quickly log their observations; in this case, a darker interface will be employed on its design
To make it beginner-friendly, it will be designed with a clean, sleek, modern interface, making it feel approachable instead of intimidating for our casual night sky watchers
UX Considerations
UX Considerations
UX Considerations
UX-related things to consider early on before diving into the coding process:
Which text fields will have placeholder text on it?
Which text fields will have character limits?
What other form elements are we using? (e.g. dropdown menu? calendar pop-up? time picker?)
Will there be any optional fields (i.e. fields the user won’t need to fill in before saving an entry)?
UX-related things to consider early on before diving into the coding process:
Which text fields will have placeholder text on it?
Which text fields will have character limits?
What other form elements are we using? (e.g. dropdown menu? calendar pop-up? time picker?)
Will there be any optional fields (i.e. fields the user won’t need to fill in before saving an entry)?
UX-related things to consider early on before diving into the coding process:
Which text fields will have placeholder text on it?
Which text fields will have character limits?
What other form elements are we using? (e.g. dropdown menu? calendar pop-up? time picker?)
Will there be any optional fields (i.e. fields the user won’t need to fill in before saving an entry)?
Scope & Specification
Scope & Specification
Scope & Specification
For the HTML form fields:
Number of fields on the form will be limited to 6
i.e. the most basic information such as the name of the astronomical object, object type, notes, location, date, & time
List of object types will also be limited to 6: asteroid, comet, galaxy, moon, planet, & star
Placeholder text will be provided on the text fields to guide our users
The Notes text field will have a character limit. Shorter entries can help prevent giant paragraphs from overflowing our cards, log entries from becoming visually unbalanced, and huge blocks of text from overwhelming beginners.
A calendar popup and a time picker for easy date/time selection
Every field will need to be filled out before the entry can be saved, to ensure each log entry is complete and useful
A form validation error message (“Please fill out this field”) will appear to guide users to what matters
For the log entries:
Easy save, edit, & delete processes; no multiple clicks required
A confirmation dialog box that says “Are you sure you want to delete this entry?” appears, however, to prevent any accidental data loss
The log entry with the most recent Date Observed will be placed at the top, similar to social media app timelines users are familiar with
The placement of retroactive/backdated entries on the timeline will be based on their Date Observed
Each log entry will be in its own card, its colour depending on the object type
This makes the log entries easy to scan and distinguish from one another
For the HTML form fields:
Number of fields on the form will be limited to 6
i.e. the most basic information such as the name of the astronomical object, object type, notes, location, date, & time
List of object types will also be limited to 6: asteroid, comet, galaxy, moon, planet, & star
Placeholder text will be provided on the text fields to guide our users
The Notes text field will have a character limit. Shorter entries can help prevent giant paragraphs from overflowing our cards, log entries from becoming visually unbalanced, and huge blocks of text from overwhelming beginners.
A calendar popup and a time picker for easy date/time selection
Every field will need to be filled out before the entry can be saved, to ensure each log entry is complete and useful
A form validation error message (“Please fill out this field”) will appear to guide users to what matters
For the log entries:
Easy save, edit, & delete processes; no multiple clicks required
A confirmation dialog box that says “Are you sure you want to delete this entry?” appears, however, to prevent any accidental data loss
The log entry with the most recent Date Observed will be placed at the top, similar to social media app timelines users are familiar with
The placement of retroactive/backdated entries on the timeline will be based on their Date Observed
Each log entry will be in its own card, its colour depending on the object type
This makes the log entries easy to scan and distinguish from one another
For the HTML form fields:
Number of fields on the form will be limited to 6
i.e. the most basic information such as the name of the astronomical object, object type, notes, location, date, & time
List of object types will also be limited to 6: asteroid, comet, galaxy, moon, planet, & star
Placeholder text will be provided on the text fields to guide our users
The Notes text field will have a character limit. Shorter entries can help prevent giant paragraphs from overflowing our cards, log entries from becoming visually unbalanced, and huge blocks of text from overwhelming beginners.
A calendar popup and a time picker for easy date/time selection
Every field will need to be filled out before the entry can be saved, to ensure each log entry is complete and useful
A form validation error message (“Please fill out this field”) will appear to guide users to what matters
For the log entries:
Easy save, edit, & delete processes; no multiple clicks required
A confirmation dialog box that says “Are you sure you want to delete this entry?” appears, however, to prevent any accidental data loss
The log entry with the most recent Date Observed will be placed at the top, similar to social media app timelines users are familiar with
The placement of retroactive/backdated entries on the timeline will be based on their Date Observed
Each log entry will be in its own card, its colour depending on the object type
This makes the log entries easy to scan and distinguish from one another
Technology Stack
Technology Stack
Technology Stack
The following were used to build the web app, with assistance from GitHub Copilot (using the Claude Sonnet 4 AI model):
Frontend
HTML5 - For clean, well-structured page layouts
CSS3 - For custom styling with responsive design
Vanilla JS - For client-side interactivity and API communication
Backend
Node.js - Provides the runtime environment for executing JS on the server
Express - Handles HTTP requests and routing, serving the frontend and exposing RESTful API endpoints
Prisma - Acts as a bridge between the Express server and MongoDB database; manages the database schema; and handles data validation
MongoDB - Stores observation data from the user
The following were used to build the web app, with assistance from GitHub Copilot (using the Claude Sonnet 4 AI model):
Frontend
HTML5 - For clean, well-structured page layouts
CSS3 - For custom styling with responsive design
Vanilla JS - For client-side interactivity and API communication
Backend
Node.js - Provides the runtime environment for executing JS on the server
Express - Handles HTTP requests and routing, serving the frontend and exposing RESTful API endpoints
Prisma - Acts as a bridge between the Express server and MongoDB database; manages the database schema; and handles data validation
MongoDB - Stores observation data from the user
The following were used to build the web app, with assistance from GitHub Copilot (using the Claude Sonnet 4 AI model):
Frontend
HTML5 - For clean, well-structured page layouts
CSS3 - For custom styling with responsive design
Vanilla JS - For client-side interactivity and API communication
Backend
Node.js - Provides the runtime environment for executing JS on the server
Express - Handles HTTP requests and routing, serving the frontend and exposing RESTful API endpoints
Prisma - Acts as a bridge between the Express server and MongoDB database; manages the database schema; and handles data validation
MongoDB - Stores observation data from the user
System Design Diagrams
System Design Diagrams
System Design Diagrams
UML Use Case Diagram
UML Use Case Diagram
UML Use Case Diagram
Architecture Diagram/System Map
Architecture Diagram/System Map
Architecture Diagram/System Map
Final Modifications
Final Modifications
Final Modifications
The GitHub repository for this project is available through this link.
The GitHub repository for this project is available through this link.
The GitHub repository for this project is available through this link.
Please note:
Please note:
Please note:
This web app allows users to add, edit, and delete their own observation entries. Because content is user-generated, moderation is a shared responsibility, and users are encouraged to log observations thoughtfully and respectfully.
This web app allows users to add, edit, and delete their own observation entries. Because content is user-generated, moderation is a shared responsibility, and users are encouraged to log observations thoughtfully and respectfully.
This web app allows users to add, edit, and delete their own observation entries. Because content is user-generated, moderation is a shared responsibility, and users are encouraged to log observations thoughtfully and respectfully.
For this stage of the project, edits were applied on the following to improve both the UX and UI:
Field labels
Click target/hit area within the Date Seen and Time Seen input fields
Page margins
The overall look (including the font)
For this stage of the project, edits were applied on the following to improve both the UX and UI:
Field labels
Click target/hit area within the Date Seen and Time Seen input fields
Page margins
The overall look (including the font)
For this stage of the project, edits were applied on the following to improve both the UX and UI:
Field labels
Click target/hit area within the Date Seen and Time Seen input fields
Page margins
The overall look (including the font)
Final additions & modifications:
Background image
Increased contrast for all fields & cards
Object Type colours
'Required' attribute added to all fields on Edit mode
New Save & Close buttons
Padding between elements
Final additions & modifications:
Background image
Increased contrast for all fields & cards
Object Type colours
'Required' attribute added to all fields on Edit mode
New Save & Close buttons
Padding between elements
Final additions & modifications:
Background image
Increased contrast for all fields & cards
Object Type colours
'Required' attribute added to all fields on Edit mode
New Save & Close buttons
Padding between elements
