Citymag
Mobile app, website
The digital solution serving local life actors.
Citymag is a commication and citizen participation solution uniting city, professionnals and associations of the city in a common space. The platform changes the codes of local communication : it is no longer up to the resident to search for information, it is all the information that comes to him in a single application ! Professional have an unique showcase to generate more revenue and sell their products. Associations can communicate and manage their activities more easily.
I had the opporunity to work on several parts of this project.
I was able to work on the development of the first version of the back-office as well as the redesign of the latter.
I also worked on various features of the PWA, PDFs and website.
Back-Office
The back-office allows cities, professionals and associations to manage their section.
A city can create events, news and surveys. She can also create the site for her community through component catalog.
A professional can create events, news, surveys and offers.
An association can create events, news, surveys, membership calls and donations.
For events, there is an online ticket office. We can pay for tickets, offers, memberships ans make donations with possible payments directly from the app.
The back-office use Vite.
We use custom icons but also use icons from @tabler/icons.
Forms are validated with formik.
Payments are secure with stripe.
PWA
The PWA brings together the different information that the city, professionals or associations have been able to provide in their back-office. You can also report an incident in the city or take a survey.
News
On the news page, we can find news from the city hall, associations and professionals of the city and ads below.We have links to the different news feeds.We can filter news with our favorites.If we do not have a favorite, we have a link to see the professionals and associations registered on the application to be able to add them.We can do a search to find a news.
All articles are constructed in the same way. There is a title, with several blocks of text as titles ans paragraphs.An article can be accompanied by images in both the title and content.
Events
On the events page, we can find the events of the city hall, associations and professionals.We can filter to have events that only concern one of these or our favorites.We can search for an event.
An event is composed of a title, a place and a date.The description of an event contains several blocks with titles and paragraphs. It can be accompanied by images.You can register for an event, and for this uou enter a flow where you choose your seats, with discounts or not and the payment flow if the event is paying.We can also add the event to our agenda.
Offers
On the offers page, we can find all the offers that associations and professionals can offer.We can filter for offers that are not only related to associations, professionals or our favorites.We can see the different offers offered by the association or the professional.We can do a search to find an offer.
An offer is composed of a title, an image, a price, a variety of products and a quantity.There is also a description, the withdrawal procedures and the contact of the association or professional.We can respond to the offer by entering a payment flow. We can make a donation in this payment flow for the association or professional.There is a list with other offers offered by the association or professional.
Directories
On the directory, we can find information about professionals and associations present on the application.You can discover them with a list or an interactive map.We also have contacts from the municipal services.
The PWA use NextJS.
Forms are validated with formik.
The map of the interactive map is displayed with @googlemap/react-wrapper.
Payments are secure with stripe.
PDFs
PDFs generate invoices or tickets for an event with registration.
To generate QR Codes for tickets, PDFs use react-qr-code.
Website
The website explains of the application and back-office work. It allows to understand the different functionalities of the application and it allows professionals and associations to understand what the application can bring them. It also redirects to the right links depending on what you want to do (create your profile, see the different municipalities that use the application).