πŸ³οΈβ€πŸŒˆ event calendar

Overview

alman-akka

:rainbow-flag: event calendar

Frontend

The frontend of this app uses NextJS and Node 16 together with Yarn 1.x as a package manager.

Development

  • Run yarn to install the required dependencies - you can find docs and installation guide for yarn here if you don't have it yet
  • Run nvm use to set the required version with NVM
  • To fix linter errors, run yarn next lint --fix (when used with vscode, there is a setting in place for automatically formatting on save)

Getting Started

First, run the development server:

yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

Learn More About Next.js

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Comments
  • Initial e2e-tests

    Initial e2e-tests

    Fixes #17

    Purpose

    In addition to our unit test, let's have a set of e2e-tests that ensure that the page works and looks as expected. I chose cypress for this purpose since the NextJS docs point at it as an easy starting point.

    How to test

    Run yarn cypress and the example test.

    opened by magdapoppins 3
  • Add navbar to app

    Add navbar to app

    Note! All designs are currently first drafts. Fonts, icons, colors etc. will most probably be changed later on, so developer can freely choose what to use at this phase. Also, the styles do not need to polished and finalized yet, main thing is to get things working 😊 Also, if you have better ideas, let's discuss!

    Add navbar to app with buttons (see below). Buttons can be now just placeholders, no functionality needed. Mandatory features for first version:

    • app name/icon
    • filtering events (search icon)
    • login user (user icon)

    Mobile

    navbar-mobile

    Desktop

    navbar-desktop
    opened by lauravuo 2
  • Add initial events data and update script

    Add initial events data and update script

    Purpose

    • Refactored folder structure so that db scripts are in tools folder
    • Added data-folder that contains the service events as json. The events are rendered to app main view (as a first test).
    • Added script (fetch) for updating the events json from Firebase. The script is run daily via GitHub actions (can be triggered also from the actions UI). Logic for the data updates will be tuned more later.
    • The fetch-script also generates an index.js-file for easily include the events to React-components. Currently it includes all available events, but in production-phase the purpose is to include only the events in current month and onwards.

    Related Issues

    I will create later issues for the missing functionality such as unit tests for the db scripts and issues mentioned above.

    How to test

    DB events inclusion to React: Start app in localhost and see that events are listed with index and title to main view. DB scripts: Open Actions tab and see that the nightly run for workflow fetch-data has succeeded.

    opened by lauravuo 2
  • Add user authentication to firebase for adding events

    Add user authentication to firebase for adding events

    Purpose

    Add initial login functionality

    Screenshots

    image

    Related Issues

    Closes #13

    Need for new issues:

    • add e2e tests for login and logout
    • add logout icon
    • add login with email and password
    • make login experience smoother (custom login buttons and redirect flow)
    • show "accept terms" page after first login (and until user has accepted terms)

    How to test

    yarn
    yarn tools:emulator
    # open new terminal
    yarn dev
    
    1. Click navbar link Omat
    2. Click Google login
    3. Create test user for emulator and use it for login
    4. After successful login you should see "Omat tapahtumat" page
    5. Click navbar link "Ulos"
    6. After successful logout you should see main page
    opened by lauravuo 1
  • Add unit tests for db scripts

    Add unit tests for db scripts

    Purpose

    • Add missing unit tests for db add and fetch scripts.
    • Include unit tests for scripts to coverage measurements.
    • Tests are run with firebase emulator.

    Related Issues

    Closes #24

    How to test

    See that CI passes or run locally:

    yarn
    yarn test:db
    
    opened by lauravuo 1
  • Fix image leaking over the text

    Fix image leaking over the text

    Purpose

    This PR fixes the image leaking over the text after switching to use img instead of Next's Image.

    We probably need to tweak this once we will have images that are not square.

    Screenshots

    From this: Screenshot 2022-03-28 at 7 27 25

    To this:

    Screenshot 2022-03-28 at 7 26 54

    How to test

    Check that the page looks like the latter screenshot.

    opened by eevajonnapanula 1
  • Add deployment to GitHub pages

    Add deployment to GitHub pages

    Purpose

    • Add deployment to GitHub pages with custom domain almanakka.kaupunginnaiset.fi (triggers on each push to main)
    • Needed to remove the use of next/image to enable static export. It there appears a need for image optimisations later, let's reconsider the deployment model (or write custom optimiser).
    • Added a simple smoke test for the exported files via nginx-container. We could execute e2e-tests before deployment against this container once they are ready.
    • Created a local action for setting up node according to @magdapoppins nvm idea, so that we don't have to duplicate the steps in each job.

    Related Issues

    Closes #18

    How to test

    Check that CI-workflow succeeds. After merging, check that app is visible at https://almanakka.kaupunginnaiset.fi

    opened by lauravuo 1
  • Add event card

    Add event card

    Purpose

    This PR adds some styling to the list of events. I decided to add a bit different layout for the mobile view (see screenshots), as the event card became a bit too busy when the viewport width got smaller.

    Oh, and I added date-fns for date time editing.

    Screenshots

    Mobile: Screenshot 2022-03-24 at 6 29 08

    Desktop / Tablet: Screenshot 2022-03-24 at 6 28 48

    Related Issues

    This PR resolves #8

    How to test

    Open the front page, and check that all seems to be ok. Also, check in smaller viewport widths as well.

    opened by eevajonnapanula 0
  • Feat/add navbar to app

    Feat/add navbar to app

    Purpose

    This PR adds an initial version of the navbar. Also, I added couple of little things:

    • Skip to main content-link, which is visible when focused, otherwise hidden.
    • A bit of custom focus styling
    • Rainbow flag as a favicon (I needed something to find the correct tab because I have too many tabs open πŸ˜… )

    I'm also documenting some things here:

    Text next to the icons

    Having only icons representing something increases cognitive load. Not everyone understands what those icons mean (except maybe, just maybe, for the search icon). Understanding the meaning of icons is based on previous experiences, so some might recognise the icon, and some might not. So, if user doesn't recognise the icon, it increases cognitive load. That's why it's important to have text labels accompanying the icons.

    More information from Nielsen Norman Group.

    Keeping the navigation menu items visible in mobile view as well

    From accessibility perspective, it takes work to make mobile navigation (so, the hamburger version) accessible for different types of users. As we don't have many links in the design, I'd like to keep them all visible all the time - at least for now. I think switching the orientation of the link list from row to column in smaller viewports does the trick, at least for all four items that are displayed in the initial designs.

    A note: I added only the ones that are mandatory for the first version.

    Underlining of the Alman Akka-link

    I wanted to make the Alman Akka-link a bit different from the other links in the navbar, and wanted to try out the gradients. Let me know what you think! I used the colors from the progressive pride flag for this. There's a video from the hover/focus effects. This is an initial test, and can definitely be changed to something else πŸ˜„

    Screenshots

    Desktop-view: Screenshot 2022-03-19 at 10 25 30

    Mobile-view: Screenshot 2022-03-19 at 10 25 41

    Video of the skip link, which is visible when focused:

    https://user-images.githubusercontent.com/28345294/159114486-b61cdbd1-2bea-4ceb-bded-effd79e9b894.mov

    Video of the hover effects:

    https://user-images.githubusercontent.com/28345294/159113722-9c299f11-0628-4747-854d-d6118194a252.mov

    Related Issues

    This PR resolves #7

    How to test

    There's really not much to test functionally, but you could check the following:

    1. Open the page with different viewport widths (for example, using the developer tools' device toolbar)
    2. Check, that everything looks ok in different widths.
    opened by eevajonnapanula 0
  • Add event listing to app

    Add event listing to app

    Note! All designs are currently first drafts. Fonts, icons, colors etc. will most probably be changed later on, so developer can freely choose what to use at this phase. Also, the styles do not need to polished and finalized yet, main thing is to get things working 😊 Also, if you have better ideas, let's discuss!

    Add initial event list to app main view. Event list item should include:

    • event thumbnail (can be placeholder image for now)
    • event title
    • event location i.e. city or online (no need for address here)
    • event start and end time

    Mobile

    event-list-mobile

    Desktop

    event-list-desktop
    opened by lauravuo 0
  • First version of PR-template

    First version of PR-template

    Purpose

    Adding a PR-template would shape the PR's to include information that helps reviewing the PRs. It's often easy to forget to add, for example, the testing steps, but having a PR-template would remind about them.

    This is a proposal, and I'm opening this as a draft PR so that we can have a discussion about it - do we want it, and what should go in it :)

    opened by eevajonnapanula 0
  • Add logic for events adding

    Add logic for events adding

    Purpose

    Add button for adding dummy event to database. Using now only dummy events, but same logic can be used when adding the event form.

    At localhost the event is added to emulator environment and update triggered to dev-time backend API. In production environment the event addition triggers fetch gh action workflow.

    Screenshots

    image image image

    Related Issues

    Closes #38

    How to test

    • Start emulator with yarn tools:emulator
    • Login
    • Add event with "LisÀÀ tapahtuma"-button
    • Refresh page and see that event is listed to "Omat tapahtumat"
    opened by lauravuo 1
  • Add field about accessibility to the event

    Add field about accessibility to the event

    Info in this field can be either from physical accessibility perspective (esteettΓΆmyys), or digital accessibility (saavutettavuus). Good examples of what could be in this field is if the venue is accessible with wheelchair, if there is (Finnish) sign language interpretation captions for live streaming and/or audio descriptions, or if there is an accessible toilet, and many other things.

    Maybe there could be a description to the field, when adding this to an event, which gives more information. Maybe even a link to some instructions about accessible events πŸ€” I'll look into that at some point and link some good instructions.

    opened by eevajonnapanula 0
Owner
null
Simple modern-looking event calendar πŸ“…πŸ’œ

evo-calendar Simple Modern-looking Event Calendar ?? Demo: https://edlynvillegas.github.io/evo-calendar/ ?? Features: Flexible and fully customizable

Edlyn Villegas 144 Jan 6, 2023
io-ts Typed Event Bus for the runtime of your Node.js application. A core for any event-driven architecture based app.

Typed Event Bus Based on io-ts types, this bus provides a handy interface to publish and consume events in the current runtime of the Node.js process.

Konstantin Knyazev 3 May 23, 2022
'event-driven' library aims to simplify building backends in an event driven style

'event-driven' library aims to simplify building backends in an event driven style(event driven architecture). For message broker, light weight Redis Stream is used and for event store, the well known NoSQL database, MongoDB, is used.

Sihoon Kim 11 Jan 4, 2023
πŸžπŸ“…A JavaScript calendar that has everything you need.

A JavaScript schedule calendar that is full featured. Now your service just got the customizable calendar. ?? Table of Contents Collect statistics on

NHN 10.4k Jan 5, 2023
Quick access to view the current time and date in Ethiopian calendar.

Ethiopian-Current-time-chrome-extension Quick access to view the current time and date in Ethiopian calendar. steps to follow:- Extract the zip folder

null 10 Aug 26, 2022
A block calendar for Logseq.

Logseq Block Calendar A plugin to render a calendar in block, so you can put it onto right side bar. Features Click date to jump to journal page. Swit

Richard Yu 17 Dec 27, 2022
πŸ“… Calendar link generator for popular services

?? Calendar Link Status Build Health Community JavaScript library to generate an event link for Google Calendar, Yahoo! Calendar, Microsoft Outlook, e

Anand Chowdhary 246 Dec 18, 2022
Simple calendar jquery plugin

Simple Calendar A simple and easy plugin to create a calendar and add events to it. Usage Including files You need to include : A recent version of JQ

Benoit Rospars 42 Dec 29, 2022
Basic styling to create calendar icons with pure HTML and CSS

Calendar Icon Basic styling to create calendar icons with pure HTML and CSS Usage Embed the CSS, and markup your date: <link type="text/css" rel="styl

null 1 Aug 23, 2022
jQuery plugin for showing a calendar yearview with blocks (github contributions style)

calendar-yearview-blocks jQuery plugin for showing a calendar yearview with blocks (github contributions style) Code adopted from https://github.com/b

Opbod 2 Feb 28, 2021
Bulma's extension to display a calendar

bulma-calendar Bulma's extension to display a calendar. It can be used on page as large calendar with apointments or in modal/popup for datepicker. Ex

null 275 Jan 4, 2023
ES6 - Simple pure JavaScript calendar

rolyart-calendar Simple Pure JS Calendar. Demo Install Add rolyart-calendar.js Add style.css Add calendar container <div id="myCalendar"></div> Init c

Roland Maruntalu 3 Sep 28, 2022
Script to synchronize between a Notion database and Google Calendar both ways. Uses Google App Script.

Yet Another Two Way Notion-Google Calendar Sync Script A script to sync events between Google calendar and a Notion database. Features! Google App Scr

kat 41 Jan 7, 2023
A simple Calendar Heatmap for jQuery

Calendar Heat Map This jQuery plugin allows to conveniently display data like contributions on a day by day basis, indicating the count by colors. Ins

Sebastian 38 Jul 5, 2022
Memento mori (Latin for 'remember that you [have to] die'). Self-filling calendar.

Memento mori Latin for 'Remember your death', Memento Mori is a powerful concept that's been used for centuries to help people focus on what truly mat

Roni Laukkarinen 6 Nov 8, 2022
A Tempermonky / Greasemonkey plugin which can help you export your class schedule to the calendar on your phone / pad / PC / Mac.

WHU Class Schedule Export as iCS Languages: English | η°‘ι«”δΈ­ζ–‡ | 繁體中文 Changelog v0.90.1 - Sep 18, 2022 Fix bugs: Fix an error when a class have multiple s

Ostrich_B 6 Sep 7, 2022
Examples of how to do query, style, dom, ajax, event etc like jQuery with plain javascript.

You (Might) Don't Need jQuery Frontend environments evolve rapidly nowadays and modern browsers have already implemented a great deal of DOM/BOM APIs

NEFE 20.3k Dec 24, 2022
Work around some mobile browser's 300ms delay on the click event.

jQuery fastClick plugin Work around the 300ms delay for the click event in some mobile browsers (e.g. Android and iOS). Code based on http://code.goog

Dave Hulbert 132 Jul 6, 2020
A lightweight normalized tap event

?? Retired: Tappy! Per our unmaintained repository status documentation this repository is now retired and is no longer accepting issue reports or pul

Filament Group 573 Dec 9, 2022