Section Links:

Introduction to Project
Branding
Content
Front End
Back End
SEO
Libraries and Hooks
Project Take Aways
Link to the Naphill Tennis CLub website
Recommendation

Volunteering project.
The site has been in use years 2014-2022 where I helped updating the content on regular basis and improving. My second website I published.

Given a free hand to style colours, fonts and logo I was really happy to create professional looking site for a small village club.

The site has few content ideas created to help promote the club in a positive fun way. Home page for example has a short (music) video explaining aspects of tennis and way people should play tennis encouraging for try out games. Posters for upcoming and past events are also included. Really enjoyed video editing, as this was first one of my first attempts on video editing using Windows Video Editor.

Video What is Tennis?

Posters:

For front end: Next JS.

To gather data from the forms: React-Hook-Forms.

Icons used at the bottom of the page: FontAwesome.

Back end is solved using API part of Next JS with MYSQL database installed and running on Raspberry Pi 4 with remote access enabled.

SEO was focused on local searches in High Wycombe/Buckinghamshire area, for anyone enquirying about tennis coaching, playing tennis for various age groups.

The name of the club is incorporated into url, for anyone looking for Naphill Tennis Club.

Keywords per page:

Home page
Tennis High Wycombe, Bucks, Buckinghamshire

---

About
Tennis coaching for children, juniors, High Wycombe, Bucks, Buckinghamshire

---

Upcoming Events
Tennis courts for hire, High Wycombe, Bucks, Buckinghamshire

---

Meet the Ladies Team
Adult tennis coaching High Wycombe, Bucks, Buckinghamshire

---

Meet the Mens Team
Tennis sessions for the retired, High Wycombe, Bucks, Buckinghamshire

---

Join Us
Tennis refreshers High Wycombe, Bucks, Buckinghamshire

---

Contact
Tennis sessions for schools High Wycombe, Bucks, Buckinghamshire

Font Awesome - incons at the bottom of page links

Next js - for creating the site

MYSQL + mysql2 - storing persistent data

react-hook-form - for gathering data from front end and sending it over to API

next sitemap - for generating sitemap

anime js - for sliding navigation in and out

hamburger-react - burger menu with transitions

Learned:

• Create and host my own database server on Rapsberry Pi
• Use libraries for site utilities like burger menu, animation, form data collecting, and sitemap generating.
• On submission, page takes data from the form and uses them on the following page using Router.
• Connect to database to read and save data from it.

Struggled with:
It took a while to connect to MYSQL remotely using Node JS. Note to self: to enable remote access to MYSQL: edit config file of the database where bind-address=0.0.0.0 and create a user with MYSQl user@'%'.

Recommendation

Lucy designed a much needed website for our tennis club, she had some great ideas to make it user friendly for our members to be able to access all the information they required, such a membership information, details about the club sessions etc. Lucy did an excellent job designing and maintaining the website. She listened to our requirements and was very helpful and professional.

Sarah Dengel, Club Secretary

Naphill Tennis Club site