Aloha Academy Graduation Project

Etkinlik web sitesi

BiMoLa adını verdiğim etkinlik sitesinde konser, tiyatro, stund-up, aile ve spor kategorilerine göre çeşitli mekanlarda gerçekleşen etkinlikler bulunmaktadır. Kullanıcı kendine uygun tarih, konum ve saate göre etkinlik seçimi yapıp sepetine ekleyebilmektedir. Proje Reactjs kullanılarak yapılmıştır.

Projeye başlarken indirilmesi gereken paketler

• npx create-react-app graduate-project (projeye verilen isim)
• npm install react-router-dom
• npm install axios
• npm install sweetalert2

Features

Tüm içerikleri ana sayfada göster

homePage.mp4

Etkinlik detay sayfası

Detail.mp4

Etkinlik arama

Search.mp4

Etkinlik Detay sayfası

Section jsx te bulunan her bir activity'e tıklanıldığında Link içinde bulunan "to" ile ActivityDetails componentine yönlendirme yapıldı. Alınan activity.id ile her bir aktivite için kayıtlı title, img ve açıklama ActivityDetail sayfasına yansıtıldı. Bunun için "useParams()" kullandım.

Categories.mp4

const ActivityDetail = () => {
  const { id } = useParams();
  const [events, setEvents] = useState([]);
  const [locations, setLocations] = useState([]);
  const locUrl = "https://localhost:7007/api/Location/";

  axios.get(locUrl).then((res) => setLocations(res.data[0]));

  useEffect(() => {
    const url = "https://localhost:7007/api/Activities/" + id;
    axios
      .get(url)
      .then((res) => setEvents(res.data[0]))
      .catch((err) => console.error(err));
  }, [id]);

return (
  <h1 className="text-black">{events.title}</h1>
  <div className="ms-4">Tarih: {events.activityDate}</div>
  <img className="card-img" src={events.activityImage} alt="" />
  <div className="mb-5 mt-3 text">{events.description}</div>
  <span className="mb-3">{events.ticketprice} TL</span>
)